Charting Helix has these chart families, and each one has its own API page: Bar Chart Spatial Bar Chart, drawn in three dimensions Line Chart Spatial Ribbon Chart, drawn in three dimensions Area Chart Scatter Chart Spatial Scatter Chart, drawn in three dimensions Spatial Surface Chart, drawn in three dimensions Donut Chart Spatial Treemap, drawn in three dimensions Heatmap Spatial Heatmap, drawn in three dimensions Sparkline Trend Legend, which all of the charts share This guide covers which chart fits which question, and how data gets into a chart. Data gets in the same way for every chart. Choose a chart Choose a chart by the question it answers. How much, compared. Bar Chart. A bar's length is its value, so it always starts at zero. How much, across two sets of names. Spatial Bar Chart, with a bar for each category and series, standing in a box you can turn. Use it where the shape across both matters more than any one value. Bar Chart is read more exactly. How something moved over time. Line Chart. It measures from the data's own range, so a small change still shows. Its area puts a light wash under each line. Each wash is drawn from the floor on its own and overlaps the others. How several series moved over the same places, each apart. Spatial Ribbon Chart, with a ribbon for each series, one behind another, in a box you can turn. Use it where series cross and a line chart tangles them. Line Chart is read more exactly. How a total is made up over time. Area Chart. Each column is stacked on the one below, so the top edge is the total and a band's thickness is its share. Use it when the parts add up to a total. Line Chart with area overlaps the series, and Area Chart adds them. Parts of one whole, at one moment. Donut Chart. How large each item is within its group, and how it stands on a second measure. Spatial Treemap, with a block for each row, its area its size and its height the second measure, gathered by group on a floor you can turn. Use it where many items share a whole, such as each service's requests and its response time. Its table and its tooltip carry the exact values. Whether two measures relate. Scatter Chart, with one point per row. Where rows fall on three measures, and which gather together. Spatial Scatter Chart, with one point per row in a box you can turn. Use it for data that has three dimensions, such as clusters or embeddings. Its table and its tooltip carry the exact values. How one measure rises and falls over two others. Spatial Surface Chart, with one row per place on a grid, drawn as a surface you can turn. Use it for a measure over two ranges, such as load by hour and by day. Its table carries the exact values. How each day or check went. Heatmap, for uptime, contributions, or activity. The same days, as a relief. Spatial Heatmap reads the same table as Heatmap and draws each reading as a prism as tall as its value. Use it where the overall shape matters more than any one exact value, such as a busy stretch in a year of commits. The tooltip and the table carry the exact values. The shape of a series beside its number. Sparkline, drawn with no axes. Use Trend to show which way one measurement moved and whether that is good news. The six spatial charts draw themselves in 3D in SVG, which a print and a page without WebGL show too, and a drag or Shift with an arrow turns. @fusion.dev/helix-plot can also draw all six with three.js, lit and in perspective, in a view you can drag round and zoom. The spatial charts guide covers both. Charts read their data from a table <table id="revenue"> <caption>Revenue by quarter</caption> <thead> <tr><th>Quarter</th><th>Direct</th><th>Partner</th></tr> </thead> <tbody> <tr><th>Q1</th><td>120</td><td>80</td></tr> <tr><th>Q2</th><td>150</td><td>95</td></tr> </tbody> </table> <helix-bar-chart for="revenue"></helix-bar-chart> for points to a real <table> by id, and the chart reads its series from that table. No other Helix component gets its data this way. There are two reasons. First, a property does not survive hydration. A framework's server render emits markup, and a property is not markup. An array assigned to items exists only after JavaScript has run, so the server has nothing to send and the first paint has nothing to draw. Text in the document is the one channel that both the server and the client can see. Second, the table is what a screen reader reads. A chart is a picture of numbers, and a screen reader cannot read a picture. The table holds the numbers in the document, where you can navigate them, and the chart draws them. If the table should not be seen, hide it visually, and the data is still there: <table data-hidden-visually id="revenue" >…</table> A table hidden this way takes no room on the page, however many rows it has. Inside an element with a transform or a filter, a long hidden table still lengthens that element's scrolling area. Wrap the table in a hidden <div> there: <div data-hidden-visually> <table id="revenue">…</table> </div> The table's caption becomes the chart's accessible name unless you set label. The caption usually has the right words already. Each chart writes a short summary for screen readers, which starts with that name. The drawing is hidden from screen readers, and the summary gives the one reading a chart is usually read for: Bar Chart: each series' highest reading. Line Chart: each series' latest reading. Area Chart: the latest total and each part's share of it. Donut Chart: each slice's share of the whole. Scatter Chart: each series' number of points and how strongly the two measures relate. Spatial Bar Chart: its number of bars, series, and categories, and the range of its values. Spatial Ribbon Chart: its number of readings, series, and places, and the range of its values. Spatial Scatter Chart: its three measures and its number of points. Spatial Surface Chart: its measures, its number of readings, and the range of its heights. Spatial Treemap: its number of items and groups, and the range of their sizes. Heatmap and Spatial Heatmap are each an image with that name. Sparkline takes a label of its own. Tables that change A chart follows its table. It redraws when you edit a cell, add a row, or replace the table with a new one under the same id. It also draws a table that arrives after the chart does, such as one a framework renders once its data loads. A blank cell, or one that does not hold a number, is a gap in its series. The row keeps its place on the axis, a line breaks at the gap, a bar chart draws no bar there, and a heatmap draws the cell with no tone. The readings after the gap stay under their own labels, and the tooltip for that row still shows the row's cells. A cell holds a number when its whole text reads as one, such as 1200 or -3.5. A formatted number, such as 1,200 or $1.2k, is a gap. To chart a formatted cell, write its number in data-value: <tr><th>Q1</th><td data-value="1200">$1.2k</td><td data-value="800">$800</td></tr> The chart reads data-value when a cell has one, and the cell's text otherwise. The table and the tooltip still show $1.2k. Charts with many readings A chart builds what it can show, and that is bounded by its size. The readings themselves are read again each time the table or the data changes. Names on the axis. Line Chart, Area Chart, and Bar Chart draw every reading's name where every name fits. Where they do not, the chart draws a regular share of them, and always the first and the last. Where every row header holds a <time>, the names drawn start a period, such as the first reading of each month or each year. Where the names are numbers in order, such as years, they are round numbers. Other names are drawn every so many readings, counted from the first. The chart works out the share again when it is resized. The tooltip and the keys still say each reading's own name. Gridlines. gridlines="category" rules the readings whose names are drawn. Lines. Where a line has more readings than the plot has pixels across, it is drawn through the points those pixels can show: in each column of pixels, the first reading, the lowest, the highest, and the last. Markers. markers marks every reading, with one path for each series. Columns. Bar Chart draws each column as an element while every column and the space between two categories are at least a pixel wide. Past that, it draws each series' columns as one path, each column of pixels as tall as the tallest column in it, and draws the category the tooltip describes again over them, at least two pixels thick. Points. Scatter Chart draws each series' points as paths. Points that overlap are drawn in separate groups, up to four deep, so each keeps its edge and a cluster reads darker. The point the keys rest on is drawn again over them. The table drawn from data. Past a few hundred readings, the hidden table holds one page of them at a time. Its markup gives a screen reader the number of rows in the whole table and the place of each row, and the words after it say which readings the page holds. Two buttons after it show the previous and the next page. You press them with a screen reader as you read. They are left out of the tab order, so the plot stays the chart's one tab stop. The keys on the plot move through every reading. A table on the page. A chart reads the whole table that for names, and the table is part of your page, however many rows it has. Where the readings are too many to put in the document, draw the chart from data. Series colors Helix has twenty-four series color tokens, in order, from --helix-color-series-1 to --helix-color-series-24. A chart with three series uses the first three. The tokens are ordered so that each color stays distinguishable from the ones before it. They are not designed to look good as a full set of twenty-four. The palette wraps after the last color. One number in one place sets where it wraps, so a chart and the legend beside it always agree on each series' color. Each mark in a chart carries its series color as a custom property. The chart tracks which series each bar belongs to, and CSS cannot count that. With the custom property, you can restyle a series from outside the chart without knowing the drawing order. Add a legend <helix-legend for="revenue"></helix-legend> <helix-bar-chart for="revenue"></helix-bar-chart> The legend reads the same table as the chart, so their names and colors always match. They can differ only if you point them at two different tables. Charts on right-to-left pages On a page with dir="rtl", an axis that follows reading order starts on the right, where the text starts. Categories and time follow reading order. The words around a chart are HTML and change direction on their own. The drawing changes direction with them, so the name under a column belongs to that column in either direction. The pointer and the tooltip read the drawing the same way. An axis of values keeps its own direction. These parts change direction: Bar Chart's columns, and its rows, which grow out of their names at the right Line Chart, Area Chart, and Sparkline, with their end marks Heatmap's weeks, which were already a grid laid out along the line Spatial Heatmap's weeks in its SVG drawing. A three.js drawing keeps its direction, and the chart's labels follow it. A half Donut Chart, which is read across These parts keep their direction: Values keep their vertical direction, because up means more in every script. Numerals are text beside the drawing, so none of them reads backwards. A whole Donut Chart keeps its first slice at twelve o'clock and runs clockwise. That is a clock's convention, and it does not depend on the script. Scatter Chart is laid out as on a left-to-right page, with its y axis on the left and larger values to the right. Both of its axes are measures, and a number line runs that way in every script. Its axis names read in their own direction, so a name in Arabic reads right to left under the far end of the plot. Its summary and tooltip follow the page's direction. Spatial Scatter Chart and Spatial Surface Chart are laid out as on a left-to-right page, because all three of their axes are measures. Their summaries and tooltips follow the page's direction. Spatial Bar Chart, Spatial Ribbon Chart, and Spatial Treemap are laid out as on a left-to-right page too, since each drawing is a box you turn. Its summary and tooltip follow the page's direction. To keep a chart left to right on a right-to-left page, such as a number line in a mathematics text, set dir="ltr" on the chart element. You need nothing else. Chart animation and reduced motion Charts animate when they appear and when their data changes. Every chart responds to prefers-reduced-motion. See Motion. What Helix charts do not include Helix charts have no axis configuration language, no plugin system, and no chart types that you build by composing scales. Each chart is a drawing that reads a table and is styled by the token system, and the table is its accessible representation. When you need a grammar of graphics, use a charting library.