Overview
Use a bar chart to compare values across categories. Choose a horizontal layout for long category labels, stacking for composition, and percentage stacking when the relative share matters more than the total.
Anatomy
BarChart owns the data, configuration, layout, selection, and loading state. Add axes and a grid for context, one or more Bar parts for the series, and optional Legend, Tooltip, and Brush parts for exploration.
Accessibility
Canvas charts need a nearby text summary or data table when exact values or comparisons are important. Give every series a clear label and use patterns or visible labels when color alone would be ambiguous. Tooltip, brush, and direct bar selection are pointer-operated; provide equivalent controls when those interactions are required.
Installation
Usage
<BarChart> owns the data, theme configuration, layout, and shared state. Add axes, a grid, legend, tooltip, brush, and one or more <BarChart.Bar> parts as needed. Each Bar sets its own fill, radius, buffer treatment, and selection behavior.
import { BarChart, type ChartConfig } from "honestui/charts";<BarChart data={data} config={chartConfig} stackType="default">
<BarChart.Grid />
<BarChart.XAxis dataKey="month" />
<BarChart.Legend isClickable />
<BarChart.Tooltip />
<BarChart.Bar dataKey="earlyVotes" variant="default" isClickable />
<BarChart.Bar dataKey="dayOfVotes" variant="hatched" isClickable />
</BarChart>The root compiles its children into an ECharts option and renders the plot on a canvas. The config prop maps each series data key to its label and theme colors. See Chart Config for the complete shape.
Canvas rendering has a few implementation details to keep in mind: the duotone split is baked as a single ECharts gradient (visually equivalent for single-color series), the stripped cap is a fixed-height band derived from the measured axis scale, the hatched fill is a tiling canvas texture, and the zoom brush is a themed mini chart driven by ECharts' native dataZoom rather than the custom HonestBrush.
Interactive Selection
Add isClickable to any <Bar> (and to <Legend>) to make those series selectable. Use the onSelectionChange callback on <BarChart> to handle selection events:
<BarChart
data={data}
config={chartConfig}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
>
<BarChart.XAxis dataKey="month" />
<BarChart.Legend isClickable />
<BarChart.Tooltip />
<BarChart.Bar dataKey="earlyVotes" variant="default" isClickable />
<BarChart.Bar dataKey="dayOfVotes" variant="default" isClickable />
</BarChart>Loading State
Pass isLoading to show an animated skeleton of gray bars with a shimmer while data loads, and loadingBars to set how many bars the skeleton draws.
Buffer Bar
With bufferBar set, a <Bar>'s last data point renders with a hatched (diagonal lines) pattern and a series-colored outline while the rest stay solid, handy for flagging projected, estimated, or incomplete data at the end of a series.
Examples
Examples of the bar chart with different variants. Each <Bar> sets its own variant; the chart-wide stackType and layout shape the rest.
Hover Highlight
Set enableHoverHighlight on a <Bar> to dim every other bar on hover, keeping focus on one series. It uses ECharts' native emphasis/blur, so nothing re-renders mid-hover.
Max Value Highlight
Set enableMaxValueHighlight on the chart to color only its tallest column and mute the rest. With several series the comparison is per column, the totals across every series at that category, so a whole stack or group lights up together rather than one bar inside it.
Gradient Colors
Bar Variants
variant="blocks" renders each bar as a stack of segments rather than a solid column, and fills the rest of the column with the same segments in a muted tone, so every bar reads against a dim grid of its own blocks. variant="expandable" rests as a thin line and grows out from its own middle to the full bar width on hover, naming its value above itself.
Stack Types
Horizontal Layout
Set layout="horizontal" on <BarChart> to render bars horizontally. The <YAxis> then shows categories and the <XAxis> shows values, pass a tickFormatter to <YAxis> for category formatting.
Glowing Bars
API Reference
The props below are grouped by the part they belong to. On canvas each part is declarative config the root compiles.
The root container. It owns the data, shared selection state, loading skeleton, and optional native dataZoom brush. Everything visual composes as children and compiles into the ECharts option.
A single bar series. Each <Bar /> carries its own fill variant, radius, glow, buffer, and clickability, so a chart can hold any number of bars with mixed styles.
The two axes. In the default (vertical) layout <XAxis /> is the category axis and <YAxis /> the value axis; layout="horizontal" swaps the roles. Include an axis to show its tick labels, omit it to hide them. Both hide automatically while loading, and the value axis formats ticks as percentages when stackType="percent".
The background grid lines. Include it to draw the dashed split lines on the value axis; omit it and they don't render. Takes no props.
The hover tooltip. Include it to enable the tooltip; omit it and none shows. It reads selection state, so its content dims unselected series.
The series legend, rendered as HTML above the canvas. Include it to show the legend; omit it and none shows. With isClickable, each entry toggles selection of its series.
An optional zoom brush below the chart, a themed mini chart driven by ECharts' native dataZoom. Include <BarChart.Brush /> to render it; dragging the range filters the main chart.