Bar Chart

Simple static & beautifully designed bar charts

Basic Chart

Installation

npx shadcn@latest add @evilcharts/bar-chart

The bar chart is composible. <EvilBarChart> is the container, and you compose only the parts you need — <Grid>, <XAxis>, <YAxis>, <Legend>, <Tooltip>, and one or more <Bar> — as its children. Each <Bar> carries its own variant, radius, glowing, bufferBar, and isClickable, so a single chart can mix fill styles and make only some series interactive.

import {
  EvilBarChart,
  Bar,
  XAxis,
  YAxis,
  Grid,
  Tooltip,
  Legend,
} from "@/components/evilcharts/charts/bar-chart";

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

Interactive Selection

Add isClickable to any <Bar> (and to <Legend>) to make those series selectable. Use the onSelectionChange callback on <EvilBarChart> to handle selection events:

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

Loading State

isLoading='true'

Note

The bar chart supports loading state with a shimmer animation. You can pass the isLoading prop to the chart to show the loading state while your data is being fetched.

Buffer Bar

Note

When a <Bar> has bufferBar set, its last data point is rendered with a diagonal lines (hatched) pattern while the rest stay solid. This is useful for indicating projected, estimated, or incomplete data at the end of a series — commonly seen in financial charts and forecasting dashboards.

Examples

Below are some examples of the bar chart with different variants. Each <Bar> carries its own variant, and the chart-wide stackType and layout shape the rest.

Hover Highlight

Note

The hover highlight feature dims other bars when you hover over a bar, making it easier to focus on specific data points. Set the enableHoverHighlight prop on each <Bar> to enable this feature.

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

Use layout="horizontal" on <EvilBarChart> to display bars horizontally. In horizontal mode, the <YAxis> shows categories while the <XAxis> shows values — pass a tickFormatter to <YAxis> for category formatting.

Glowing Bars

<Bar glowing /> - desktop

<Bar glowing /> - mobile

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

EvilBarChart

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

Prop	Type	Default	Description
data*	TData[]	–	Data used to display the chart. An array of objects where each object represents a data point (`TData extends Record<string, unknown>`).
config*	Record<string, ChartConfig[string]>	–	Configuration object that defines the chart's series. Each key should match a data key in your data array, with a corresponding color or color array.
children*	ReactNode	–	The composed chart parts — `<Grid />`, `<XAxis />`, `<YAxis />`, `<Legend />`, `<Tooltip />`, and one or more `<Bar />`.
className	string	–	Additional CSS classes to apply to the chart container.
stackType	default\|stacked\|percent	"default"	Controls how multiple bars combine. `"default"` renders bars side by side, `"stacked"` stacks them on top of each other, and `"percent"` normalizes them to show percentage distribution.
layout	vertical\|horizontal	"vertical"	The orientation of the bars. `"vertical"` displays bars vertically, `"horizontal"` displays bars horizontally — in which case the `<YAxis />` shows categories and the `<XAxis />` shows values.
barRadius	number	2	The default corner radius for every `<Bar />`, in pixels. Each `<Bar />` may override it locally 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 bar grows from its baseline (bottom for vertical layout, left for horizontal). `"none"` disables it — devices with the OS reduce-motion preference fall back to `"none"` automatically.
barGap	number	–	The gap between bars in the same category (when using multiple series).
barCategoryGap	number	–	The gap between different categories of bars.
backgroundVariant	BackgroundVariant	–	Background pattern variant to display behind the chart.
defaultSelectedDataKey	string \| null	null	The data key that should be selected by default.
onSelectionChange	(selectedDataKey: string \| null) => void	–	Callback fired when a series is selected or deselected — by clicking a clickable `<Bar />` or `<Legend />` entry. Receives the selected data key, or `null` when deselected.
isLoading	boolean	false	Shows a loading skeleton animation with a shimmer effect when data is being fetched.
loadingBars	number	12	Number of bars to display in the loading skeleton.
showBrush	boolean	false	When enabled, displays a brush control below the chart for selecting and zooming into a range of data.
xDataKey	keyof TData & string	–	The data key used for the x-axis. Only needed by the brush footer — the axis itself reads its key from `<XAxis dataKey="…" />`.
brushHeight	number	–	The height of the brush preview area in pixels.
brushFormatLabel	(value: unknown, index: number) => string	–	Custom formatter for the brush axis labels.
onBrushChange	(range: EvilBrushRange) => void	–	Callback invoked when the user changes the brush selection range.
chartProps	ComponentProps<typeof BarChart>	–	Additional props forwarded to the underlying Recharts BarChart component. Read the Recharts BarChart documentation for available props.

Bar

A single bar series. Each <Bar /> is self-contained and generates its own gradient/pattern definitions, so a chart can hold any number of bars — 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"	The visual style of the bar fill. Applies to this bar only.
radius	number	–	The corner radius of this bar, in pixels. Falls back to the chart's `barRadius` when omitted.
animationType	none\|left-to-right\|right-to-left\|center-out\|edges-in	–	The grow-in order for this bar series. Falls back to the chart's `animationType` when omitted.
isClickable	boolean	false	Lets this bar be selected by clicking it. When any bar is selected, unselected bars become semi-transparent.
enableHoverHighlight	boolean	false	When enabled, hovering over a bar dims this bar while another is hovered, making it easier to focus on specific data points.
glowing	boolean	false	Applies a soft outer glow to this bar series.
bufferBar	boolean	false	When enabled, renders this series' last data point with a diagonal lines (hatched) pattern while the rest stay solid. Useful for indicating projected or incomplete data at the end of a series.
barProps	ComponentProps<typeof Bar>	–	Escape hatch for raw props forwarded to the underlying Recharts Bar component.

XAxis and YAxis

The category and value axes. Both ship with the chart's flat default styling and forward every Recharts axis prop, so dataKey, tickFormatter, tickMargin, etc. pass straight through. They are hidden automatically while the chart is loading, and each resolves its axis 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. Read the Recharts XAxis and Recharts YAxis documentation for available props.

Grid

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

Prop	Type	Default	Description
…gridProps	–	–	Every Recharts CartesianGrid prop is forwarded as-is. Read the Recharts CartesianGrid documentation for available props.

Tooltip

The hover tooltip. It reads the chart's selection state so its content dims unselected series.

Prop	Type	Default	Description
variant	default\|frosted-glass	"default"	The visual style of the tooltip surface.
roundness	sm\|md\|lg\|xl	"lg"	Controls the border-radius of the tooltip.
defaultIndex	number	–	When set, the tooltip is visible by default at the specified 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.