Chart

Line chart

Change over time, for up to five series. Hover or tap a point for its card; focus the chart and use the arrow keys.

Stacked area chart

data-type="area" data-stacked: how parts add up to a total over time.

Bar chart

Comparing amounts across categories.

Grouped bar chart

Two or more series side by side in each category.

Pie chart

Parts of one whole, up to six slices.

Donut chart

A pie with the total in the middle. Set the center with data-center-label.

Sparkline

A tiny trend line for inside a stat. It takes its data from attributes and says the trend in its aria-label.

Attributes

Live data

For apps that hold the numbers themselves, such as React state or a live feed. Jewel.chart.render() writes the table and draws the chart; update() redraws it in place. The table is still there behind “Show data”, so the keyboard and screen reader view keep working. Press the button to send new numbers.

const chart = Jewel.chart.render(document.querySelector('#pods'), {
  type: 'donut',
  title: 'Pods by state',
  categoryLabel: 'State',
  labels: ['Running', 'Pending', 'Failed'],
  series: [{ name: 'Pods', values: [12, 5, 1] }],
});

// Later, when the data changes:
chart.update({ series: [{ values: [14, 3, 1] }] });

In React

Render once in an effect, call update() when the data changes, and let Jewel own the element’s contents.

function PodsChart({ counts }) {
  const ref = useRef(null);
  const chart = useRef(null);
  useEffect(() => {
    chart.current = Jewel.chart.render(ref.current, {
      type: 'bar', categoryLabel: 'State',
      labels: ['Running', 'Pending', 'Failed'],
      series: [{ name: 'Pods', values: counts }],
    });
  }, []);
  useEffect(() => { chart.current?.update({ series: [{ values: counts }] }); }, [counts]);
  return <div ref={ref} />;
}

Data shape

update() merges, so leave out anything that hasn’t changed. Jewel.chart.update(figure, data) works on any chart, including ones written as an HTML table.

Notes

• Every chart keeps its table behind a “Show data” link, and the table is all that shows without a script.
• Charts can be tabbed to; arrows step through points and a live region reads each one.
• The palette is checked for color-blind contrast, and lines are labeled at their ends where they don’t collide.