The number that goes with the line
A labelled value tile for the row under a chart: a series dot matching the palette, the series name, and its reading. The tile takes a soft neutral fill that holds it apart from its panel, and it is pure JSX and CSS, so a row of them costs nothing under a dense dashboard.
Under a chart
The intended home: one tile per series, dots matching the chart palette, laid out in a row inside the chart's panel.
Direct1,204
Organic search982
Referral611
Social245
Without a swatch
Omit the swatch and no dot renders: the tile becomes a plain labelled value, for totals and summary figures that belong to no single series.
Total sessions3,042
Conversion rate4.6%
Numbers and long labels
A numeric value is formatted with toLocaleString, and a label that outgrows its tile truncates with an ellipsis rather than wrapping.
Total events1,284,093
Returning visitors from paid campaigns18,240
// From the npm package
import { LegendTile } from 'rift-ds/components/LegendTile/LegendTile';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/legend-tile.json