# Charts _Box Kite 2.2.6 · a markdown copy of https://www.box-kite.dev/charts/_ Four micro-primitives — sparkline, progress ring, gauge and mini donut — built from the SVG components, styled with the props everything else here takes, and cheap enough to put one in every row of a ten-thousand-row grid. ## Not a chart library These are the small, dense drawings a dashboard is made of, and nothing more: no axes, no legends, no data transformations. What they give you instead is that a chart is `a Box` — its colour, its size, its dark mode, its hover state and its breakpoints are the props you already know, and there is no second styling system to learn or to theme. For a real chart with axes and a tooltip, reach for Recharts and wrap it in a `ChartContainer`, which is further down this page; these are for the twenty places a dashboard needs a shape rather than a chart. **Sparkline** ```jsx ``` ## A sparkline fills its box A sparkline is the one primitive that is not drawn to scale: it is `100%` wide and stretches to whatever you give it, which is what makes it usable in a table cell of unknown width. The line stays one width thick anyway, because `vectorEffect="non-scaling-stroke"` is on by default — the property SVG has for exactly this, and an ordinary prop, so `vectorEffect="none"` turns it off. Everything else is inherited from the ``: `color` paints it (the default stroke is `currentColor`), `strokeWidth` thickens it, and both take a `hover`, a `theme` and a breakpoint. **One scale for many rows** ```jsx // Each sparkline scales to its own data by default — good alone, misleading in a column. // min and max fix the axis, so two rows can be compared at a glance. ``` **A gradient is a value now** ```jsx ``` ## …which it was not before `fill` and `stroke` used to take a colour token and nothing else, so a gradient had to be written as an attribute — `props={{ fill: 'url(#sky)' }}` — which put the paint outside the theme system and outside every pseudo-class. Both props now also accept a reference to something the document defines (`url(#trend)`) or a variable somebody else declared (`var(--chart-1)`), so a gradient fill can change on `hover` and per theme like any other value. `clipPath` takes a `url(#…)` the same way. A typo still produces nothing at all rather than a broken declaration: the definition names the two shapes it accepts. **Progress ring** ```jsx 90 ``` **The arc eases with no animation code** ```jsx const [value, setValue] = useState(0.35); ``` ## Why that moves The filled part of a ring is a dash on its outline, and a dash length is an ordinary style prop — so it lands in a CSS class, and every shape inside an `` already transitions. Setting a number is all the JavaScript there is; the easing is the stylesheet, and it stops on its own for a visitor who asked for `prefers-reduced-motion`. **Gauge** ```jsx 75% ``` ## A dial is an arc you choose `sweep` is how far round it goes and `start` is where it begins, in degrees clockwise from twelve o'clock — three quarters of a turn from the bottom left by default, a half turn for a speedometer, a whole turn for a ring. Both are constants of the shape rather than of the data, so every gauge of the same shape shares one path string. **Mini donut** ```jsx ``` ## Colours, and where they come from A donut is the one primitive that needs more than one colour, so it takes a list and cycles it. Each entry is anything the `fill` prop accepts — a token like `sky-500`, or `var(--chart-1)` if your design system publishes a chart palette. The values need no total: each is drawn as its share of the whole. **Ten thousand rows, one sparkline each** ```jsx // A cell renderer is a component: define it outside the render, or every scroll remounts the column. function TrendCell({ cell }: { cell: { row: { data: Row } } }) { return ( ); } ``` ## Why ten thousand rows is affordable Two different answers, and the split is the whole trick. A sparkline's _shape_ is the `d` attribute, which the styling engine never sees — ten thousand different shapes generate no CSS at all, and what _is_ a style prop (the colour, the width) is shared, so the rows share one rule each. A ring's fill, on the other hand, has to be a style prop to be able to transition, so it lands in a class name — and the fraction is rounded to half a percent, which caps a column of percentages at a couple of hundred rules instead of one per row. Half a percent of a 48px ring is a third of a pixel. ## A CSS variable is a Box prop Every prop on this page becomes a CSS declaration inside a class. `vars` is the one whose _names_ come out of the value: `vars={{ 'color-revenue': 'sky-500' }}` declares `--color-revenue` on the element, and everything inside it inherits it — including markup this library never rendered. Because it is an ordinary prop it nests inside `theme`, `hover` and a breakpoint like all the others, and it lands in a class, so two subtrees declaring the same palette share one rule rather than each carrying a `
` with variables on it — no role, no name, nothing in the accessibility tree. Whatever the chart library renders inside owns its own accessibility. Swept with axe on every release, in this state: `ChartContainer`. No violations, with contrast and landmark rules left to a human. Screen-reader results are not published yet. ## ChartContainer style tree Every part the component draws is a node with a name, so a default can be restyled with `Box.components()` instead of a selector — and a variant is a name too. `chartContainer` --- _Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_