Bar Chart

Static, beautifully designed bar charts

Basic Chart

Installation

npx shadcn@latest add @evilcharts/recharts-bar-chart

The bar chart is composible. <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.

import { EvilBarChart } from "@/components/evilcharts/charts/recharts-bar-chart";
import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart";

<EvilBarChart data={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={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

isLoading='true'

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

gradient colors

Bar Variants

variant='default'

variant='hatched'

variant='duotone'

variant='duotone-reverse'

variant='gradient'

variant='stripped'

Stack Types

stackType='stacked'

stackType='percent'

Horizontal Layout

layout='horizontal'

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

<Bar glowing /> - desktop

<Bar glowing /> - mobile

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*	ReactNode	–	The composed chart parts — `<Grid />`, `<XAxis />`, `<YAxis />`, `<Legend />`, `<Tooltip />`, and one or more `<Bar />`.
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="…" />`.
chartProps	ComponentProps<typeof BarChart>	–	Extra props forwarded to the underlying Recharts BarChart. See the Recharts BarChart docs for options.

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 Recharts Bar.

XAxis and YAxis

The category and value axes. Both use the chart's flat default styling and forward every Recharts 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 Recharts XAxis / YAxis prop is forwarded as-is. See the Recharts XAxis and Recharts YAxis docs for options.

Grid

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

Prop	Type	Default	Description
…gridProps	–	–	Every Recharts CartesianGrid prop is forwarded as-is. See the Recharts CartesianGrid docs for options.

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.