Charts
The chart draws twenty-two kinds of chart with no charting package behind it: columns, bars, lines, areas, scatter and bubbles, pie and doughnut, radar and polar area, heatmap, treemap, sankey, gauge, funnel, candlestick and OHLC, waterfall, histogram and box plot. Stack them or show them as shares, put a line on a second axis, mark targets and ranges, and drag across a time axis to zoom in.
The sparkline is a trend the size of a word, for a table cell or a sentence. Both read every value out from the keyboard, show the numbers as a table on request, keep to the theme in light and dark, and save as PNG, SVG or CSV.
A sales dashboard
Four figures with their trend, revenue and margin on two axes, where the orders came from, and revenue by region. Switch the year and every chart moves to the new numbers. Click the legend to hide a series, and click a column or a slice to choose it.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-chart id="ch-revenue" type="column" label="Revenue and margin by month" toolbar format="currency:GBP" style="--bmx-chart-height: 18rem"></bmx-chart>
<bmx-chart id="ch-channels" type="doughnut" label="Orders by channel" legend="end" style="--bmx-chart-height: 18rem"></bmx-chart>
<bmx-chart id="ch-regions" type="area" stack="normal" label="Revenue by region" format="currency:GBP" style="inline-size: 100%; --bmx-chart-height: 16rem"></bmx-chart>
<script>
const chart = document.getElementById('ch-revenue');
chart.data = [ /* your data */ ];
const chart2 = document.getElementById('ch-channels');
chart2.data = [ /* your data */ ];
const chart3 = document.getElementById('ch-regions');
chart3.data = [ /* your data */ ];
</script>
Twenty-two kinds
Every kind the chart draws, each from a few lines of data. The treemap opens a region when you click it; the time chart zooms when you drag across it.
A million points
A sensor reading every thirty seconds for a year, twice over. Lines this long are thinned to what the width can show without losing a peak, and painted on a canvas; zoom in and the detail comes back.
Get the code
<script src="/assets/bmx-components.min.js"></script>
<bmx-chart id="ch-large" type="line" label="Two sensors, every 30 seconds for a year" zoom format="decimal:1" style="inline-size: 100%; --bmx-chart-height: 18rem"></bmx-chart>
<script>
const chart = document.getElementById('ch-large');
chart.data = [ /* your data */ ];
</script>
Sparklines in a table
Six products over the last twelve weeks: the trend with its highest and lowest week, the weeks up and down, and where each stands against its target. A screen reader hears each one as a sentence.
| Product | Last 12 weeks | Up or down | Against target |
|---|
In a line of text too: sign-ups this month
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-sparkline values="3,5,4,8,6,9,12" label="Sign-ups this month"></bmx-sparkline>