Radial bar chart
Concentric rings, each filling toward its own goal: activity rings, a readiness score, a budget per category.
A radial bar chart shows a few measures against their goals as concentric rings: the move, exercise and stand rings of a fitness app, a readiness score, what is spent of each budget. One row is one ring, outermost first; a ring past its goal fills its track and draws a darker second lap. It is drawn by ECharts.
Import
import '@c2n/components/chart/radial-bar-chart'This chart draws with ECharts 6, a peer dependency it loads on first draw: npm install echarts.
Usage
Data
Rows are plain objects. label-field names each ring, the one c2-chart-series reads its value, and max-field its goal; without it, max (100 by default) is every ring’s goal. color-field gives a ring its own colour; otherwise rings take the chart palette in order.
Shape
A ring starts at twelve o’clock and runs clockwise; start-angle turns the start. sweep is how much of the circle a full ring covers: 270 leaves the bottom open, the dial of a budget or a speedometer. Ring thickness and the space between rings are --c2-chart__ring--width and --c2-chart__ring--gap, and a ring narrows when the chart is too small to keep a hole. The track behind each ring is --c2-chart__track--color.
Each ring’s name is drawn at its start, in black or white for contrast, and left out when the ring is too short to hold it; labels="none" leaves them all out, and legend="bottom" lists the rings instead. The center slot sits in the hole for a total or an icon.
Reading it
Hovering a ring shows its value against its goal and the share (“24 / 30 · 80%”); value-suffix and precision format the values. A click highlights a ring and fades the others. For assistive technology the chart carries the same figures as a list.