Features
Nineteen chart types, and the same accessibility in every one of them. Version 0.1 is a preview.
Chart types
| Group | Types |
|---|---|
| Compare | Column (grouped, stacked, 100% stacked), bar (the same, sideways), column and line on one scale, heatmap, radar, bullet |
| Change over time | Line, area (also stacked and 100%), candlestick, sparkline (word-sized, inside a sentence) |
| Parts of a whole | Pie, donut, treemap, waterfall, funnel |
| Relationships | Scatter (with an optional least-squares line), bubble |
| Distribution | Histogram, box plot with outliers |
There is deliberately no chart with two value axes: two scales on one chart invite misreading. Draw two charts, or put columns and lines on one scale. Every type is in the demo.
What every chart has
| For | What |
|---|---|
| Everyone | A title, a subtitle, a source line, and a summary computed from the data: highest, lowest, first, last, totals, changes and shares. Nothing in it is interpreted or guessed; authors add their own description to say more. |
| Screen reader users | The chart is a named image described by its summary. With the script, Tab reaches the chart and the arrow keys walk the values; each is spoken with its position. Up and down switch series; Home and End jump to the ends; Escape leaves. The data table has a caption and proper column and row headers. |
| Keyboard users | The same exploration, with a visible focus ring on the value and a tooltip. Every button is a real button. |
| Mouse and touch | The nearest value's tooltip, with the same words. Hit areas are larger than the marks. |
| People who can't rely on color | Every series has its own marker shape or texture. Textures are on from the start wherever filled marks would otherwise differ only by color, even with JavaScript off; Patterns turns them off or on for every chart on the site, and the choice is remembered. Textures are always on in print and in Windows high-contrast mode. |
| Low vision | Every series color is at least 3:1 against the chart background in light and dark themes; text is at least 4.5:1. Charts are redrawn at the real width at any zoom, so text never shrinks. |
| People who prefer sound | Play as sound plays each value as a tone: higher pitch for larger values, moving left to right in stereo. |
| Black text on white, textures on, controls hidden, the data table printed under the chart. | |
| Phones | Drawn for the phone's width, labels wrapped rather than cut off. With JavaScript off, a narrow drawing is chosen by the stylesheet. |
| Your settings | Light and dark themes, reduced motion, forced colors. |
| Reuse | Download the data as CSV, the chart as SVG (with its own title and description) or PNG. |
| Site owners | No dependencies. No inline styles or scripts, so pages can keep a strict Content-Security-Policy. Charts render on a server or in a build step, so they are in the page before any script runs. |
The details, and how each part is checked: docs/accessibility.md. The colors and how they were checked: docs/palette.md.
Ways to use it
- In a page: load oscharts.css and oscharts.js and mount a chart from a spec: a title, a chart type and a table of data.
- From a table you already publish: add
data-oscharts="bar"to an HTML table. With the script, the chart appears in its place; without it, readers get the table unchanged. - On a server or in a build step:
render(spec)in Node gives the complete figure as HTML. - Command line:
oscharts render,svg,checkandtypes.
Not in 0.1
- Testing with screen reader users (NVDA, JAWS, VoiceOver, TalkBack). The readouts use standard ARIA and have not yet been tried by the people they are for.
- Maps, gauges, Gantt charts, sunbursts and charts with more than one level of grouping.
- Time axes with uneven spacing: dates are drawn as evenly spaced categories.