Charts

Metric switch bar chart

A dense daily bar chart with two metric tiles in the header; clicking a tile morphs the bars over to that metric.

Using Metric switch bar chart

A dense daily bar chart with two metric tiles in the header; clicking a tile morphs the bars over to that metric.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accentColor, secondColor, days, defaultMetric, animate

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

1904Range filter area chartChartsA daily traffic area chart with a range picker in the header that narrows the window to three months, thirty days or seven days and re-tweens the shape.

2273Highlighted bar chartChartsA category bar chart where one bar is called out with a dashed outline and a lighter fill, and the callout follows whichever bar you point at.

2277Horizontal bar chartChartsA row based bar chart with category labels in a fixed left gutter and rounded bars that sweep out from a shared left edge, scaled against the largest value.

2278Inline labeled bar chartChartsA horizontal bar chart with the category name printed inside each bar and the value printed just past its tip, so no axis column is needed.

2281Paired bar chartChartsA grouped bar chart where each month shows two side-by-side bars, one per series, for comparing two measures across the same categories.

2282Ranked Share Bar ChartChartsA horizontal ranking chart of one series split by category, where every bar takes its own hue from an ordered palette and rows sort from largest to smallest share.