Bar Chart
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
Static, beautifully designed bar charts powered by Apache ECharts
Installation
Usage
The ECharts bar chart is composible, sharing the Recharts twin's API shape. <EChartsBarChart> is the container, and every part hangs off it as a compound member — <EChartsBarChart.Grid>, <EChartsBarChart.XAxis>, <EChartsBarChart.YAxis>, <EChartsBarChart.Legend>, <EChartsBarChart.Tooltip>, and one or more <EChartsBarChart.Bar> — so a single import gives you the whole chart. Each <Bar> carries its own variant, radius, glowing, bufferBar, and isClickable, so one chart can mix fill styles and make only some series interactive.
import { EChartsBarChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-bar-chart";<EChartsBarChart data={data} config={chartConfig} stackType="default">
<EChartsBarChart.Grid />
<EChartsBarChart.XAxis dataKey="month" />
<EChartsBarChart.Legend isClickable />
<EChartsBarChart.Tooltip />
<EChartsBarChart.Bar dataKey="desktop" variant="default" isClickable />
<EChartsBarChart.Bar dataKey="mobile" variant="hatched" isClickable />
</EChartsBarChart>The one real difference is under the hood: ECharts renders to a <canvas>, so these children never mount as DOM. The root reads their props and compiles them into the ECharts option object — same JSX, same presence semantics (omit a part and it doesn't render), but the children are declarative config, not live DOM nodes.
The config is the same contract as every EvilCharts chart — each key maps a data key to a label and a per-theme colors array. See Chart Config for the full shape. Colors resolve from CSS variables at runtime, so dark mode just works.
Canvas rendering brings a few small departures from the Recharts twin: 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 EvilBrush.
Interactive Selection
Add isClickable to any <Bar> (and to <Legend>) to make those series selectable. Use the onSelectionChange callback on <EChartsBarChart> to handle selection events:
<EChartsBarChart
data={data}
config={chartConfig}
onSelectionChange={(selectedDataKey) => {
if (selectedDataKey) {
console.log("Selected:", selectedDataKey);
} else {
console.log("Deselected");
}
}}
>
<EChartsBarChart.XAxis dataKey="month" />
<EChartsBarChart.Legend isClickable />
<EChartsBarChart.Tooltip />
<EChartsBarChart.Bar dataKey="desktop" variant="default" isClickable />
<EChartsBarChart.Bar dataKey="mobile" variant="default" isClickable />
</EChartsBarChart>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 <EChartsBarChart> 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, but the API mirrors the Recharts twin one-to-one.
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 <EChartsBarChart.Brush /> to render it; dragging the range filters the main chart.