Bullet chart

c2-bullet-chart

A bullet chart: one measure against a target and qualitative bands, as Stephen Few drew it for KPI scorecards. Each row of data is one bullet, on its own scale; several stack, horizontal by default. Drawn by ECharts.

label-field names a row and description-field adds a muted second line, for the unit. The one c2-chart-series is the measure, drawn as a bar a third of the band height. target-field (or target for every row) is the target, a tick across the bar, and bands-field (or bands) the band boundaries, ascending: [150, 225, 300] draws three bands, 0–150, 150–225 and 225–300, from poor to good. A row's scale runs from min to the largest of its last band, its value and its target, unless max-field or max sets the end; scale="shared" puts every row on one scale. With better="lower" the band colours run the other way, so the good band sits near zero.

<c2-bullet-chart label-field="kpi" description-field="unit" target-field="target" bands-field="bands"
  data='[{ "kpi": "Revenue", "unit": "US$, thousands", "actual": 270, "target": 250, "bands": [150, 225, 300] }]'>
  <c2-chart-series field="actual" label="Actual"></c2-chart-series>
</c2-bullet-chart>

The bands are a grey ramp from --c2-chart__band-start--color (poor) to --c2-chart__band-end--color (good), and --c2-chart__band-1--color … --c2-chart__band-5--color replace one position, poorest first, for status tints. The chart sizes itself: unless --c2-chart--height is set, it is as tall as its rows, --c2-chart__row--height each. orientation="vertical" turns the rows into columns.

Hovering a row shows the value, the target with the share reached, and the band the value falls in. The plot is one tab stop: the arrow keys move between rows, Home and End go to the first and last, Enter highlights a row and Escape clears it, and a live region reads the focused row. Clicking a row fires point-click and highlights it.

c2-chart-series

One series of a chart, declared as a light-DOM child. The element renders nothing: it is a definition the chart reads, the same way c2-table reads its c2-table-column children. Everything it exposes as an attribute can also be set as a property, and format is property-only.

<c2-line-chart x-field="month" data='[{ "month": 1, "revenue": 120, "cost": 80 }]'>
  <c2-chart-series field="revenue" label="Revenue"></c2-chart-series>
  <c2-chart-series field="cost" label="Cost" color="#ea580c"></c2-chart-series>
</c2-line-chart>

c2-chart-legend

A legend linked to a chart by id. Place it anywhere in the document to control the legend's layout independently from the chart.

c2-chart-tooltip

A tooltip linked to a chart by id. It can float beside the hovered point or render inline wherever it is placed in the document.

It is shown only while its chart has a hovered point, and says so through the custom state :state(open) rather than by toggling hidden on itself: the host keeps exactly the attributes it was authored with, so a server-rendered tooltip matches the hydrated one. An authored hidden still hides it.