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 composable, sharing the LayerChart sibling’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.
<script lang="ts">
import {
EChartsBarChart,
type ChartConfig
} from '$lib/components/evilcharts/charts/echarts-bar-chart/index.js';
</script><EChartsBarChart {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 difference is under the hood: these compound children are declarative configuration slots rather than visual DOM nodes. The root reads their props and compiles an ECharts option, which ECharts paints with Canvas by default or SVG when renderer="svg".
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.
The ECharts implementation brings a few small departures from the LayerChart sibling: the duotone split is a single ECharts gradient, the stripped cap is a fixed-height band derived from the measured axis scale, and the zoom brush is a themed mini chart driven by ECharts’ native dataZoom. The hatched, blocks, and buffer fills use offscreen canvas tiles; with renderer="svg", ECharts may embed those tiles as raster images inside the SVG.
SVG Renderer
Pass renderer="svg" to the chart root to opt into ECharts’ SVG renderer. Omit it to use the default Canvas renderer.
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}
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
Ordered dither
Set renderStyle="dither" to use the independent ordered-dither treatment inspired by Dither Kit. Axes, tooltips, selection, and the ECharts renderer stay intact.
API Reference
The props below are grouped by the part they belong to. Regardless of renderer, each part is declarative config the root compiles, but the API mirrors the LayerChart sibling 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 chart surface. 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.