Fieldbook
Sign in

Charts

Inline labeled bar chart

A 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.

Using Inline labeled bar chart

A 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.

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, barRadius, rowHeight, 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

Horizontal bar chart
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.
Ranked Share Bar Chart
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.
Highlighted bar chart
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.
Metric switch bar chart
2280Metric switch bar chartChartsA dense daily bar chart with two metric tiles in the header; clicking a tile morphs the bars over to that metric.
Paired bar chart
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.
Rounded bar chart
2275Rounded bar chartChartsA plain single series bar chart with generously rounded bar tops, faint gridlines and a value chip that appears over whichever bar is hovered.