Playground

Preview

MultipleVertical

Layout

Series

Style

Radius

Options

<Chart config={chartConfig} className="min-h-[200px]">
  <BarChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <ChartXAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <ChartBar dataKey="desktop" fill="var(--color-desktop)" radius="base" />
    <ChartBar dataKey="mobile" fill="var(--color-mobile)" radius="base" />
  </BarChart>
</Chart>

JSX Composition

Chart.* from this library, and other components from Recharts.

Grid<CartesianGrid />

Y-Axis<ChartYAxis />

Legend<ChartLegend />

Labels<LabelList />

Patterns

Main display patterns for BarChart — choose based on your use case.

Default

Basic bar chart with a single series

Multiple Bars

Place multiple series side-by-side for comparison

Stacked

Stack multiple series to visualize totals

Horizontal

Horizontal bar chart (layout="vertical")

Tooltip Styles

Use the indicator prop on ChartTooltipContent to change the tooltip indicator shape.

Dot (default)

Default dot indicator

January

Desktop186

Mobile80

indicator="dot"

Line

Vertical line indicator

January

Desktop186

Mobile80

indicator="line"

Dashed

Dashed line indicator

January

Desktop186

Mobile80

indicator="dashed"

API

Component Structure

Chart— Recharts

.BarProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

.BarPropsBar (radius · variant · layout · stackPosition)

.XAxisX-axis

.YAxisY-axis

.TooltipTooltip wrapper

.TooltipContentPropsTooltip content

.LegendLegend wrapper

.LegendContentLegend content

Props

Chart

config—

ChartConfig

Chart configuration object (label and color definitions)

children—

ReactElement

Recharts chart component

idundefined

string

Unique chart ID — used for CSS variable scoping

hoverFadefalse

boolean

Enables highlight effect — hovered bar group shown at full color, others faded out

Name	Type	Default	Description
`config`	`ChartConfig`	`—`	Chart configuration object (label and color definitions)
`children`	`ReactElement`	`—`	Recharts chart component
`id`	`string`	`undefined`	Unique chart ID — used for CSS variable scoping
`hoverFade`	`boolean`	`false`	Enables highlight effect — hovered bar group shown at full color, others faded out

ChartBar

variant"solid"

"solid" | "outline"

Bar style — "outline" shows a thick border with semi-transparent fill

radius"none"

"none" | "sm" | "base" | "md" | "lg"

Corner radius size — named variants matching design tokens (--radius-*)

layout"vertical"

"vertical" | "horizontal"

Chart direction — "horizontal" applies radius to the right side (opposite Y-axis)

stackPosition"top"

"top" | "bottom"

Position in stacked bars — "bottom" applies radius to the bottom

Name	Type	Default	Description
`variant`	`"solid" \| "outline"`	`"solid"`	Bar style — "outline" shows a thick border with semi-transparent fill
`radius`	`"none" \| "sm" \| "base" \| "md" \| "lg"`	`"none"`	Corner radius size — named variants matching design tokens (--radius-*)
`layout`	`"vertical" \| "horizontal"`	`"vertical"`	Chart direction — "horizontal" applies radius to the right side (opposite Y-axis)
`stackPosition`	`"top" \| "bottom"`	`"top"`	Position in stacked bars — "bottom" applies radius to the bottom

ChartTooltipContent

indicator"dot"

"dot" | "line" | "dashed"

Indicator shape

hideLabelfalse

boolean

Hide the label

hideIndicatorfalse

boolean

Hide the indicator

colorundefined

string

Directly sets indicator color — falls back to payload color if not set

labelClassNameundefined

string

CSS class added to the label element

nameKeyundefined

string

Name mapping for data key

labelKeyundefined

string

Mapping for label key

labelFormatterundefined

(value, payload) => ReactNode

Custom label formatter

formatterundefined

(value, name, item, index, payload) => ReactNode

Custom value formatter

Name	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	Indicator shape
`hideLabel`	`boolean`	`false`	Hide the label
`hideIndicator`	`boolean`	`false`	Hide the indicator
`color`	`string`	`undefined`	Directly sets indicator color — falls back to payload color if not set
`labelClassName`	`string`	`undefined`	CSS class added to the label element
`nameKey`	`string`	`undefined`	Name mapping for data key
`labelKey`	`string`	`undefined`	Mapping for label key
`labelFormatter`	`(value, payload) => ReactNode`	`undefined`	Custom label formatter
`formatter`	`(value, name, item, index, payload) => ReactNode`	`undefined`	Custom value formatter

ChartLegendContent

hideIconfalse

boolean

Hide the icon

nameKeyundefined

string

Name mapping for data key

verticalAlign"bottom"

"top" | "middle" | "bottom"

Vertical position — auto-injected from Recharts Legend

align"center"

"left" | "center" | "right"

Horizontal position — auto-injected from Recharts Legend

layout"horizontal"

"horizontal" | "vertical"

Layout direction — auto-injected from Recharts Legend

Name	Type	Default	Description
`hideIcon`	`boolean`	`false`	Hide the icon
`nameKey`	`string`	`undefined`	Name mapping for data key
`verticalAlign`	`"top" \| "middle" \| "bottom"`	`"bottom"`	Vertical position — auto-injected from Recharts Legend
`align`	`"left" \| "center" \| "right"`	`"center"`	Horizontal position — auto-injected from Recharts Legend
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction — auto-injected from Recharts Legend

ChartXAxis / ChartYAxis

tick{ style: { fontSize, fill } }

object

Axis label style — applies design tokens by default (--font-size-2xs, --color-text-subtle). Override with a custom object

width (YAxis)"auto"

number | "auto"

Y-axis width — "auto" adjusts to data. Pass a number for fixed width

...props—

XAxisProps | YAxisProps

All Recharts XAxis / YAxis props are accepted

Name	Type	Default	Description
`tick`	`object`	`{ style: { fontSize, fill } }`	Axis label style — applies design tokens by default (--font-size-2xs, --color-text-subtle). Override with a custom object
`width (YAxis)`	`number \| "auto"`	`"auto"`	Y-axis width — "auto" adjusts to data. Pass a number for fixed width
`...props`	`XAxisProps \| YAxisProps`	`—`	All Recharts XAxis / YAxis props are accepted

Code Recipes

Anatomy

1

2

4

3002001000

7

5

3

JanFebMarAprMayJun

6

March

Desktop237

8

Desktop

Mobile

1

Root

Chart wrapper

2

Chart Area

Plot area

3

X-Axis

Horizontal axis

4

Y-Axis

Vertical axis

5

Bar

Data bar

6

Tooltip

Hover info

7

Grid

Grid lines

8

Legend

Series legend

Best Practices

✓

Do

✓Centralize labels and colors via ChartConfig
✓Always enable accessibilityLayer
✓Set container size with min-h or aspect-video
✓Use design token colors

✕

Don't

✗Don't use hardcoded color values directly
✗Don't place a chart without a container size
✗Don't pack more than 5 series into one chart
✗Don't force data comparison without a grid

Accessibility

Keyboard

TabFocus on chart area

Arrow KeysNavigate between data points

ARIA / WCAG

accessibilityLayer keyboard and screen reader support
Tooltip provides data values as text
Legend identifies series
Color tokens automatically support dark mode

BarChart

Playground

Patterns

Default

Multiple Bars

Stacked

Horizontal

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

ChartBar

ChartTooltipContent

ChartLegendContent

ChartXAxis / ChartYAxis

Code Recipes

Anatomy

Best Practices

Do

Don't

Accessibility

Keyboard

ARIA / WCAG

Related

LineChart

AreaChart

PieChart

MetricCard