Bar Chart

Bar charts with grouped, stacked, gradient, pattern, and interactive variants

Installation

npx shadcn-svelte@latest add https://evilcharts-sv.vercel.app/r/layerchart-bar-chart.json

The bar chart is composable. <EvilBarChart> is the container, and every part hangs off it as a compound member — <EvilBarChart.Grid>, <EvilBarChart.XAxis>, <EvilBarChart.YAxis>, <EvilBarChart.Legend>, <EvilBarChart.Tooltip>, and one or more <EvilBarChart.Bar> — as children. Each <Bar> sets 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 { EvilBarChart } from '$lib/components/evilcharts/charts/layerchart-bar-chart';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart';
</script>

<EvilBarChart {data} config={chartConfig} stackType="default">
	<EvilBarChart.Grid />
	<EvilBarChart.XAxis dataKey="month" />
	<EvilBarChart.Legend isClickable />
	<EvilBarChart.Tooltip />
	<EvilBarChart.Bar dataKey="desktop" variant="default" isClickable />
	<EvilBarChart.Bar dataKey="mobile" variant="hatched" isClickable />
</EvilBarChart>

Interactive Selection

Add isClickable to any <Bar> (and <Legend>) to make its series selectable, then handle events with the onSelectionChange callback on <EvilBarChart>:

<EvilBarChart
	{data}
	config={chartConfig}
	onSelectionChange={(selectedDataKey) => {
		if (selectedDataKey) {
			console.log('Selected:', selectedDataKey);
		} else {
			console.log('Deselected');
		}
	}}
>
	<EvilBarChart.XAxis dataKey="month" />
	<EvilBarChart.Legend isClickable />
	<EvilBarChart.Tooltip />
	<EvilBarChart.Bar dataKey="desktop" variant="default" isClickable />
	<EvilBarChart.Bar dataKey="mobile" variant="default" isClickable />
</EvilBarChart>

Loading State

Note

Pass isLoading to show a shimmer skeleton while data loads.

Buffer Bar

Note

With bufferBar set, a <Bar>’s last data point renders as a hatched pattern while the rest stay solid — handy for flagging projected or incomplete data, as in financial and forecasting charts.

Examples

Examples across different variants. Each <Bar> sets its own variant; the chart-wide stackType and layout shape the rest.

Hover Highlight

Note

Set enableHoverHighlight on a <Bar> to dim the other bars on hover, keeping focus on one series.

Gradient Colors

Bar Variants

Stack Types

Horizontal Layout

Note

Set layout="horizontal" on <EvilBarChart> to lay bars sideways. The <YAxis> then shows categories and the <XAxis> shows values — pass a tickFormatter to <YAxis> to format categories.

Glowing Bars

Dither rendering

Set renderStyle="dither" on the existing chart root for ordered-dither bars without changing grouping, stacking, horizontal layout, hover, selection, loading, or brush behavior. A bar-level ditherVariant overrides the root texture.

The renderer is independently implemented for EvilCharts SV and inspired by Dither Kit by Boring Software.

API Reference

The chart has several parts. Props below are grouped by component.

EvilBarChart

The root container. It owns the data, shared selection state, loading skeleton, and optional brush — everything visual is composed as its children.

Prop	Type	Default	Description
data*	TData[]	–	The chart data — an array of objects, one per data point (`TData extends Record<string, unknown>`).
config*	Record<string, ChartConfig[string]>	–	Defines the chart’s series. Each key matches a data key and maps to a color or color array.
children*	Snippet	–	The composed chart parts — `<Grid />`, `<XAxis />`, `<YAxis />`, `<Legend />`, `<Tooltip />`, and one or more `<Bar />`.
accessibility	ChartAccessibility	–	Names and optionally describes the chart wrapper. It remains a group, so interactive legends and marks stay available to assistive technology.
className	string	–	Extra CSS classes for the chart container.
stackType	default\| stacked\| percent	"default"	How multiple bars combine. `"default"` sits them side by side, `"stacked"` stacks them, and `"percent"` normalizes them to a percentage distribution.
layout	vertical\| horizontal	"vertical"	Bar orientation. `"vertical"` draws upright bars; `"horizontal"` lays them sideways, so the `<YAxis />` shows categories and the `<XAxis />` shows values.
barRadius	number	2	Default corner radius (px) for every `<Bar />`. Each `<Bar />` can override it with its own `radius` prop.
animationType	none\| left-to-right\| right-to-left\| center-out\| edges-in	"left-to-right"	Order in which bars grow into view, inherited by every `<Bar />`. Each grows from its baseline (bottom when vertical, left when horizontal). `"none"` disables it; the OS reduce-motion preference forces `"none"` automatically.
barGap	number	–	Gap between bars in the same category (multiple series).
barCategoryGap	number	–	Gap between bar categories.
backgroundVariant	BackgroundVariant	–	Background pattern shown behind the chart.
defaultSelectedDataKey	string \| null	null	Data key selected by default.
onSelectionChange	(selectedDataKey: string \| null) => void	–	Fires when a series is selected or deselected by clicking a clickable `<Bar />` or `<Legend />` entry. Receives the data key, or `null` when deselected.
isLoading	boolean	false	Shows a shimmer skeleton while data loads.
loadingBars	number	12	Number of bars in the loading skeleton.
xDataKey	keyof TData & string	–	X-axis data key. Only the brush footer needs it — the axis reads its own key from `<XAxis dataKey="…" />`.
renderStyle	svg\| dither	"svg"	Selects the SVG or ordered-dither renderer.
ditherVariant	gradient\| dotted\| hatched\| solid	"gradient"	Default texture for dithered series.
ditherCellSize	number	2	Dither cell size in CSS pixels.
bloom	off\| low\| high\| aura	"off"	Optional bounded glow around dither pixels.
chartProps	ComponentProps<typeof BarChart>	–	Extra props forwarded to the underlying LayerChart Chart. See the LayerChart Chart documentation .

Bar

A single bar series. Each <Bar /> is self-contained and generates its own gradient/pattern defs, so a chart can hold any number — each with its own variant, radius, glow, and clickability.

Prop	Type	Default	Description
dataKey*	string	–	The series key. Must exist on both the data rows and the chart `config`.
variant	default\| hatched\| duotone\| duotone-reverse\| gradient\| stripped	"default"	Fill style for this bar only.
radius	number	–	Corner radius (px) for this bar. Falls back to the chart’s `barRadius` when omitted.
animationType	none\| left-to-right\| right-to-left\| center-out\| edges-in	–	Grow-in order for this series. Falls back to the chart’s `animationType` when omitted.
isClickable	boolean	false	Lets this bar be selected on click. While any bar is selected, unselected bars turn semi-transparent.
enableHoverHighlight	boolean	false	Dims this bar while another is hovered, keeping focus on one series.
glowing	boolean	false	Adds a soft outer glow to this series.
bufferBar	boolean	false	Renders this series’ last data point as a hatched pattern while the rest stay solid — good for projected or incomplete data.
barProps	ComponentProps<typeof Bar>	–	Escape hatch for raw props forwarded to the LayerChart Bar.

XAxis and YAxis

The category and value axes. Both use the chart’s flat default styling and forward every LayerChart axis prop, so dataKey, tickFormatter, tickMargin, etc. pass straight through. They hide automatically while the chart loads, and each resolves its type from the chart layout — categorical or numeric — unless you set type explicitly.

Prop	Type	Default	Description
dataKey	string	–	The data key for the axis values.
…axisProps	–	–	Every other LayerChart axis prop is forwarded as-is. See the LayerChart Axis documentation .

Grid

The background grid lines. Defaults to dashed lines aligned to the value axis for the current layout, and forwards every LayerChart CartesianGrid prop.

Prop	Type	Default	Description
…gridProps	–	–	Every LayerChart grid prop is forwarded as-is. See the LayerChart Grid documentation .

Tooltip

The hover tooltip. It reads the chart’s selection state, dimming unselected series.

Prop	Type	Default	Description
variant	default\| frosted-glass	"default"	The visual style of the tooltip surface.
roundness	sm\| md\| lg\| xl	"lg"	Border-radius of the tooltip.
defaultIndex	number	–	Shows the tooltip by default at this data point index.

Legend

The series legend. When isClickable is set, each entry toggles selection of its series.

Prop	Type	Default	Description
variant	square\| circle\| circle-outline\| rounded-square\| rounded-square-outline\| vertical-bar\| horizontal-bar	–	The visual style of the legend indicators.
align	left\| center\| right	"right"	Horizontal placement of the legend.
verticalAlign	top\| middle\| bottom	"top"	Vertical placement of the legend.
isClickable	boolean	false	Lets each legend entry toggle selection of its series.

Brush

An optional zoom brush below the chart. Include <EvilBarChart.Brush /> to render it; dragging the range filters the main chart.

Prop	Type	Default	Description
height	number	–	Height of the brush preview strip in pixels.
formatLabel	(value: unknown, index: number) => string	–	Formats the range-handle labels below the brush.
onChange	(range: { startIndex: number; endIndex: number }) => void	–	Fires when the brush selection range changes.

Was this page helpful?

Line Chart Beautifully designed Svelte 5 line charts

Composed Chart Composed charts that combine bars, lines, gradients, and interactive states

On This Page

Installation Usage Interactive Selection Loading State Buffer Bar Examples Hover Highlight Gradient Colors Bar Variants Stack Types Horizontal Layout Glowing Bars Dither rendering API Reference

Bar Chart

Documentation Index

Installation

Usage

Interactive Selection

Loading State

Buffer Bar

Examples

Hover Highlight

Gradient Colors

Bar Variants

Stack Types

Horizontal Layout

Glowing Bars

Dither rendering

API Reference