`<bmx-pivot-chart>`

A chart of a bmx-pivot-grid's totals that follows the pivot: change the layout, filter, open or close a member, and the chart redraws from what the grid shows. Columns, bars, lines, areas (side by side or stacked), pie and doughnut, drawn as SVG by the library - no charting package.

10 properties · 1 events · 1 methods · 6 parts

Example

Columns

Stacked

Lines

Bars

Doughnut

The chart follows the pivot. Close a quarter's year, filter a region or drag another field into Columns with the field list, and the chart redraws. Click the legend to hide a series; focus the chart and use the arrow keys to hear each value.

Show markup

<div class="row" role="group" aria-label="Chart type">
  <bmx-button id="ex-pc-column" variant="soft">Columns</bmx-button>
  <bmx-button id="ex-pc-stack" toggle variant="soft">Stacked</bmx-button>
  <bmx-button id="ex-pc-line" variant="soft">Lines</bmx-button>
  <bmx-button id="ex-pc-bar" variant="soft">Bars</bmx-button>
  <bmx-button id="ex-pc-doughnut" variant="soft">Doughnut</bmx-button>
</div>

<bmx-pivot-chart id="ex-pc" for="ex-pc-pivot" label="Revenue by quarter" style="margin-block-start: 1rem; --bmx-pivot-chart-height: 18rem"></bmx-pivot-chart>

<bmx-pivot-grid id="ex-pc-pivot" label="Sales" field-list="closed" style="--bmx-pivot-grid-height: 16rem; margin-block-start: 1rem"></bmx-pivot-grid>

<div class="row" style="margin-block-start: 1rem">
  <span class="note" id="ex-pc-out">
    <strong>The chart follows the pivot.</strong> Close a quarter's year, filter a region or drag another field into
    Columns with the field list, and the chart redraws. Click the legend to hide a series; focus the chart and use the
    arrow keys to hear each value.
  </span>
</div>

<script type="module">
  await customElements.whenDefined('bmx-pivot-chart');

  const chart = document.getElementById('ex-pc');
  const pivot = document.getElementById('ex-pc-pivot');
  const out = document.getElementById('ex-pc-out');

  const regions = ['North', 'South', 'East', 'West'];
  let seed = 3;
  const random = () => ((seed = (seed * 1103515245 + 12345) % 2147483648) / 2147483648);
  const records = Array.from({ length: 8000 }, () => ({
    region: regions[Math.floor(random() * 4)],
    ordered: `2026-${String(1 + Math.floor(random() * 12)).padStart(2, '0')}-${String(1 + Math.floor(random() * 28)).padStart(2, '0')}`,
    revenue: Math.round(random() * 250000) / 100,
  }));

  pivot.fields = [{ field: 'revenue', title: 'Revenue', format: { style: 'currency', currency: 'GBP' } }, { field: 'ordered', title: 'Order date' }];
  pivot.layout = { rows: ['ordered:quarter'], columns: ['region'], values: [{ field: 'revenue', title: 'Revenue' }] };
  pivot.data = records;

  for (const type of ['column', 'line', 'bar', 'doughnut']) {
    document.getElementById(`ex-pc-${type}`).addEventListener('click', () => (chart.type = type));
  }
  document.getElementById('ex-pc-stack').addEventListener('bmxActivate', event => (chart.stacked = event.detail.pressed));
  chart.addEventListener('bmxChartSelect', event => {
    const { category, series, value } = event.detail;
    out.textContent = `${category}, ${series}: ${value.toLocaleString('en-GB', { style: 'currency', currency: 'GBP' })}`;
  });
</script>

Or give it data ({ categories, series: [{ name, values }] }) and no pivot at all.

The legend turns series on and off. The keyboard moves along the categories with Left and Right and between series with Up and Down, saying each value; the numbers are also in a table for screen readers.

Properties

Property	Attribute	Type	Default	Description
`data`	`data`	`BmxPivotChartData \| string`	—	The numbers to chart, without a pivot: `{ categories, series: [{ name, values }] }`, or JSON.
`for`	`for`	`string \| HTMLElement`	—	The pivot grid it charts: its id, a CSS selector, or the element.
`label`	`label`	`string`	—	A title over the chart, and its accessible name.
`legend`	`legend`	`'bottom' \| 'end' \| 'none'`	`'bottom'`	Where the legend goes: `bottom`, `end` or `none`.
`locale`	`locale`	`string`	—	A BCP 47 locale for numbers. Default: the page's `lang`.
`maxCategories`	`max-categories`	`number`	`40`	At most this many categories.
`maxSeries`	`max-series`	`number`	`10`	At most this many series.
`stacked`	`stacked`	`boolean`	`false`	Stack the series (columns, bars and areas).
`type`	`type`	`BmxPivotChartType`	`'column'`	`column` (default), `bar`, `line`, `area`, `pie` or `doughnut`.
`withTotals`	`with-totals`	`boolean`	`false`	Chart subtotals and grand totals too.

Events

Event	Detail	Description
`bmxChartSelect`	`BmxPivotChartSelectDetail`	A bar, point or slice was clicked, or Enter was pressed on it.

Methods

Method	Signature	Description
`refreshChart`	`refreshChart() => Promise<void>`	Draws again from the pivot.

CSS shadow parts

Part	Description
`caption`	its title.
`chart`	the whole chart.
`legend`	the series.
`legend-item`	one series, a button that shows or hides it.
`plot`	the drawing.
`tooltip`	the value under the pointer.

CSS custom properties

Property	Description
`--bmx-pivot-chart-area-opacity`	How solid an area is. Default 0.22.
`--bmx-pivot-chart-background`	Behind the chart.
`--bmx-pivot-chart-color-0`	The first series (or slice). Colours 0 to 9 are used in turn.
`--bmx-pivot-chart-color-1`	The second series.
`--bmx-pivot-chart-color-2`	The third series.
`--bmx-pivot-chart-color-3`	The fourth series.
`--bmx-pivot-chart-color-4`	The fifth series.
`--bmx-pivot-chart-color-5`	The sixth series.
`--bmx-pivot-chart-color-6`	The seventh series.
`--bmx-pivot-chart-color-7`	The eighth series.
`--bmx-pivot-chart-color-8`	The ninth series.
`--bmx-pivot-chart-color-9`	The tenth series.
`--bmx-pivot-chart-grid`	The value axis lines.
`--bmx-pivot-chart-height`	How tall the drawing is. Default 20rem.