The Chart section (available on some plans) showcases a full-screen bar, line, pie or doughnut chart (or a combination of chart styles), and can be animated to show changes in the data and/or annotations as your readers scroll.

A chart is constructed from the data in a CSV file : typically exported from a spreadsheet created in Google Sheets, Excel, etc. After importing the CSV file into the Shorthand Chart section, a chart type can be chosen and elements of the chart styled in a single view (or frame) or across multiple frames. On each frame there are options to change aspects of the data and its style, and to add overlayed text and foreground media. Each frame will be shown in sequence to readers as they scroll through the story.

​

As with all Shorthand section templates, adding one to your story will show the section with some default content. The defaults for a chart section include a combination bar & line chart with three frames.

To see how the section is constructed or to modify it, first click the "Edit Chart data" button on the left side of the section:

The section's frame editor will open, showing a representation of each of the section's frames on the right. At the top-right of this view is a button to edit the base data for the section, while alongside each frame thumbnail image is a button to edit the data and its style at that frame:

If you are creating a new chart, the best first step is likely to delete all but one of the default frames by clicking the "Remove Frame" button beside each (your section will need at least one frame in order to show to your readers):

Then click the "Edit Base Data" button at the top of the column to open a panel in which you can import your CSV data file:

This panel shows the data that's currently in the section and how that data will be styled by default in each frame that's added. As shown in the image above, at the top left of the panel, there's a button to import a CSV file, and another to download the current data in the section as a CSV file (useful if you'd like to see how the data in a section is structured or for importing back into Excel etc for bigger modifications). Click the Import CSV button to select a CSV file from your computer.

After importing a CSV file, the Manage Chart Base Data panel will update. Here you can see how the data from the above sheet is interpreted by Shorthand, with a table showing the data on the left and a preview of the chart on the right. This preview represents how your chart will display by default on any frame you add to the section:

Within the panel there are multiple locations for styling the chart, changing the chart type, and/or making adjustments to the displayed data.

Change the chart type and other styles for a data series through the cog button at the top of a series column. Below you can see how the default bar chart can have different colours and labels applied to each bar, or have the whole series display as a pie or doughnut chart:

When you are happy with your chosen chart type and the basic stying, close the

Base Data panel to be returned to the frame editor for the section:

If you wish to show a static chart, with or without overlayed text, then one frame is all you'll need (represented by the one thumbnail image on the right of this view), in which case, you can close the panel. Overlayed text can be added and styled in the same way as with Reveal and Scrollpoints sections, and this text will scroll over your chart as your reader scrolls.

For a chart that changes while readers scroll, you'll need to specify how the chart should look at multiple points in the scrolled sequence. Each of those points is a 'frame'. To add another, click the 'Add frames' button below the first frame thumbnail image on the right of the frame editor or the "Duplicate frame" icon next to an existing frame thumbnail image:

In the image below, you'll see that this chart section now has three frames. As the content in each is the same, the chart won't change on scroll (though you could have different overlayed text in each):

To create scroll-based changes, edit the style and/or data on one or more frames so that there are some differences between them. To do so, click the "Edit Frame Data" icon to the top-right of the frame thumbnail for the frame you wish to change:

A new panel will open, titled 'Style this frame'. This panel shows a copy of the base data table, however you can make style and value changes here that will show only on this frame. To edit one of the values or its style, click on the value or the cog icon in the row:

If you change the displayed numerical values in a frame such that they differ from the values on other frames, then the segments of your chart that show that value will appear to expand or contract when the section is scrolled from frame to frame. If you change the colour of an item, then the segment of the chart will shift colour on scroll. You may also hide or show data points and their labels.

In the image below representing the first frame in a sequence, the first data point (a value of 55 for "Train/Metro") has been left as blue and with its label showing, while each of the other rows has been changed to white and with their labels hidden. The colour chip and label icons in the rows indicate these changes, and the preview of the chart on the right shows how it will display on this frame with these changes:

Closing the panel and editing the frame data similarly for the next frame, but this time leaving the labels and colours for two data points, means we've created the start of a sequence where the chart is shown segment by segment.

Back in the section editor, the sequence can be seen in the thumbnails on the right, and tested by scrolling the section:

If data values, rather than their colours and labels, are changed between frames, then the effect when scrolled is that the segments change shape to match the new values:

When finished adding and modifying the frames, click the green 'Done' button to return to the main editor interface. Text blocks can be added to each frame. These will scroll over the chart as their frame is shown, and are a useful way to provide commentary on the data presented in the frame.

The image below shows a Google sheet with three columns of data. The first column of months is common to the two others, showing Revenue and Expenses, which can be combined in a single Shorthand Chart section.

After the sheet is exported as a .csv file and then imported into a Shorthand Chart section, the base data panel shows the data table, and a chart of both the Revenue and Expenses columns:

In this instance, the data for Revenue is shown as a blue line, while the Expenses are showing as brown bars. The chart type (line or bar) and colour for each of the two series can be confirmed by the icons and colour chips at the top of the columns in the data table, and can be changed by clicking the colour chip which shows a 'settings' cog:

By changing the chart type for a series, you could display the same data as a

combined chart with two different sets of bars or as two lines:

After setting the chart types and colours in the base data, in the frame editor you can choose to display or hide whole series per frame and/or to change individual values, colours or labels per frame in order to best tell your data story.

For line and bar charts, the base data editor panel and the panel to edit frame data includes input boxes under the representation of the chart. These allow for providing custom axis labels and setting their colours, as well as providing custom scales (including minimum, maximum, and step values) and their colours. Depending on your data, a single left or right axis may suffice, or you may wish to display one on each side of the chart with the same or different minimum, maximum, and step values.

Associate a data series with a particular scale by choosing the 'Data Scale' option in the column menu and choosing 'Left' or 'Right':

To aid readers, you may wish to colour the scale values and axis labels to match the colours of their respective lines or bars. From the same menu, a series can be moved forward or backward in the display (eg to ensure that a line displays over/above rather than behind a set of bars) by using the options to 'Bring to Front' or 'Send to Back'.
​
​

Please add meaningful alt text to describe the data shown in charts for screen reader users. We’re actively improving chart accessibility by making underlying data available in preview and published stories. Don’t forget to follow our accessibility guidelines to ensure your charts meet accessibility standards for all other criteria.