Bar Chart · Kind UI charts

Loading chart…

Weekly pickup orders
Location	Orders
North	124
East	186
Central	238
West	162
South	208

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "North", orders: 124 },
  { period: "East", orders: 186 },
  { period: "Central", orders: 238 },
  { period: "West", orders: 162 },
  { period: "South", orders: 208 },
];
const config = {
  orders: { label: "Orders", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function PickupOrdersChart() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BarChart
          data={data}
          animate
          accessibilityLayer
          emphasis="category"
          margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
          aria-label="Weekly pickup orders by location"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={16}
            height={56}
            interval="preserveStartEnd"
            minTickGap={32}
          />
          <Chart.YAxis axisLine={false} tickLine={false} tickMargin={10} width={80} />
          <Chart.BarSeries dataKey="orders" radius={[5, 5, 0, 0]} maxBarSize={48} />
          <Chart.Tooltip />
        </Chart.BarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Usage

Add one BarSeries per measure. Use stackId for stacks and layout="vertical" for horizontal bars.

Composition

<Chart.Root config={config}>
  <Chart.Legend />
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.BarChart data={data} animate accessibilityLayer aria-label="Pickup orders by location">
      <Chart.CartesianGrid vertical={false} />
      <Chart.XAxis dataKey="period" />
      <Chart.YAxis />
      <Chart.BarSeries dataKey="orders" radius={[5, 5, 0, 0]} />
      <Chart.Tooltip />
    </Chart.BarChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

Bar uses explicit composition. Place Legend outside the plot; pair Root visibility with its callback for toggles.

Grouped and stacked series

Compare grouped loans or stack them with matching stackId and axes. Legend toggles recalculate the visible groups or stacks.

Loading chart…

Library loans
Subject	Print	Digital
Fiction	184	116
History	128	72
Science	156	104
Arts	112	88
Travel	96	64

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import { useState } from "react";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Fiction", print: 184, digital: 116 },
  { period: "History", print: 128, digital: 72 },
  { period: "Science", print: 156, digital: 104 },
  { period: "Arts", print: 112, digital: 88 },
  { period: "Travel", print: 96, digital: 64 },
];
const config = {
  print: { label: "Print", color: "#733bff" },
  digital: { label: "Digital", color: "#14a39a" },
} satisfies Chart.SeriesConfig;

export function LibraryLoansChart({
  arrangement = "grouped",
}: {
  arrangement?: "grouped" | "stacked";
} = {}) {
  const [visibleSeries, setVisibleSeries] = useState<string[]>(["print", "digital"]);
  const stackId = arrangement === "stacked" ? "loans" : undefined;
  return (
    <Chart.Root
      config={config}
      visibleSeries={visibleSeries}
      onVisibleSeriesChange={setVisibleSeries}
    >
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BarChart
          data={data}
          animate
          accessibilityLayer
          emphasis="category"
          barGap={4}
          margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
          aria-label="Library loans by subject and format"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={16}
            height={56}
            interval="preserveStartEnd"
            minTickGap={32}
          />
          <Chart.YAxis axisLine={false} tickLine={false} tickMargin={10} width={80} />
          <Chart.BarSeries dataKey="print" stackId={stackId} maxBarSize={32} />
          <Chart.BarSeries dataKey="digital" stackId={stackId} maxBarSize={32} />
          <Chart.Tooltip />
        </Chart.BarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Horizontal bars

Use layout="vertical" for horizontal bars, with numeric X and categorical Y axes.

Loading chart…

Workshop hours
Topic	Hours
Design ops	42
Research	36
Prototyping	28
Testing	24
Review	18

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "Design ops", hours: 42 },
  { period: "Research", hours: 36 },
  { period: "Prototyping", hours: 28 },
  { period: "Testing", hours: 24 },
  { period: "Review", hours: 18 },
];
const config = {
  hours: { label: "Hours", color: "#14a39a", formatValue: (value) => `${value} h` },
} satisfies Chart.SeriesConfig;

export function WorkshopHoursChart() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BarChart
          data={data}
          layout="vertical"
          animate
          accessibilityLayer
          emphasis="category"
          margin={{ top: 8, right: 24, bottom: 8, left: 0 }}
          aria-label="Workshop hours by topic"
        >
          <Chart.CartesianGrid horizontal={false} strokeDasharray="3 3" />
          <Chart.XAxis
            type="number"
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={40}
            interval="preserveStartEnd"
            minTickGap={32}
          />
          <Chart.YAxis
            type="category"
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            width={160}
            interval={0}
          />
          <Chart.BarSeries dataKey="hours" radius={[0, 5, 5, 0]} maxBarSize={28} />
          <Chart.Tooltip />
        </Chart.BarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Materials

Choose plain, paper, clay or glow. Set corner rounding with radius; stack caps are consumer-owned. Plot clipping can trim decorative halos.

Loading chart…

Weekly pickup orders
Location	Orders
North	124
East	186
Central	238
West	162
South	208

example.tsx

"use client";
import * as Chart from "@kind-ui/charts";
import "@kind-ui/charts/styles.css";

const data = [
  { period: "North", orders: 124 },
  { period: "East", orders: 186 },
  { period: "Central", orders: 238 },
  { period: "West", orders: 162 },
  { period: "South", orders: 208 },
];
const config = {
  orders: { label: "Orders", color: "#733bff" },
} satisfies Chart.SeriesConfig;

export function MaterialBarChart({ material = "paper" }: { material?: Chart.BarMaterial } = {}) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.BarChart
          data={data}
          animate
          accessibilityLayer
          emphasis="category"
          margin={{ top: 20, right: 32, bottom: 8, left: 0 }}
          aria-label="Weekly pickup orders by location"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={16}
            height={56}
            interval="preserveStartEnd"
            minTickGap={32}
          />
          <Chart.YAxis axisLine={false} tickLine={false} tickMargin={10} width={80} />
          <Chart.BarSeries dataKey="orders" material={material} radius={8} maxBarSize={48} />
          <Chart.Tooltip />
        </Chart.BarChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Category emphasis

BarChart emphasis="category" dims other categories during hover or keyboard inspection. Root emphasis="none" disables it. Touch inspection does not activate hover emphasis.

Eligibility requires compatible values and marks in every visible series; see BarSeries below.

API reference

Focused props for explicit composition. Recharts owns grouping, stacking and axis geometry.

BarChart

Use inside Root and a sized ResponsiveContainer.

Prop	Type	Default	Description
`data`	`Row[]`	—	Consumer-owned category observations.
`animate`	`boolean \| BarAnimation`	`false`	Reveal from numeric zero or nearest domain edge; respects reduced motion.
`emphasis`	`"none" \| "category"`	`"none"`	Opt in to eligible category comparisons.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	`"horizontal"` draws columns; `"vertical"` draws horizontal bars.
`barGap`	`number \| string`	`4`	Gap between grouped bars.
`barCategoryGap`	`number \| string`	`"10%"`	Space between category groups.
`stackOffset`	`"none" \| "expand" \| "wiggle" \| "silhouette" \| "sign" \| "positive"`	`"none"`	Native stack calculation; use `"sign"` for separate positive/negative stacks.
`accessibilityLayer`	`boolean`	`true` in Recharts	Native keyboard inspection; explicit in these components.
`aria-label` / `aria-labelledby`	`string`	—	Accessible plot name.
`margin`	`{ top?: number; right?: number; bottom?: number; left?: number }`	`5` each side	Space around plot parts.
`children`	`ReactNode`	—	Explicit axes, series, grid and tooltip.

Entrance stops on interaction or data/geometry changes. Remount to replay. BarAnimation accepts revealDurationMs (default 1000), revealEasing and hoverTransition. See Recharts BarChart.

BarSeries

String value keys identify config entries; controlled numeric keys or accessors require seriesKey.

Prop	Type	Default	Description
`dataKey`	`string \| number \| ((row: Row) => unknown)`	Required	Value field or accessor.
`seriesKey`	`string`	String `dataKey`	Metadata and visibility identity.
`stackId`	`string \| number`	—	Stack series with matching axis IDs.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Native-rectangle finish; custom paint takes precedence.
`emphasisKey`	`(payload: unknown) => string \| number \| undefined`	—	Unique category identity; does not make invalid values or custom shapes eligible.
`radius`	`number \| [number, number, number, number]`	`0`	Native corner rounding: top-left, top-right, bottom-right, bottom-left.
`maxBarSize`	`number`	—	Limit each bar's thickness.
`fill`	`string`	Config color	Native fill override; Cells can customize individual bars.
`hide`	`boolean`	`false`	Native hide and Root selection both apply.
`children`	`ReactNode`	—	Native Cells, LabelList and ErrorBar composition.

Category emphasis requires native rectangles, chart-level rows, string value keys and finite non-baseline values. Use unique string categories or unique, defined emphasisKey results for every row.

Missing, null, zero/baseline or range values, per-series data, custom shapes and non-boolean activeBar disable category emphasis for the chart. Hidden peers do not block eligibility.

Finishes are static. Native per-series animation is disabled. Custom shape, filter or non-boolean activeBar owns paint. See Recharts Bar and material support.

Shared components

Root, SeriesConfig, Legend, Tooltip, Axes and grid, ResponsiveContainer.

UsageCopy Anchor Link

Grouped and stacked seriesCopy Anchor Link

Horizontal barsCopy Anchor Link

MaterialsCopy Anchor Link

Category emphasisCopy Anchor Link

API referenceCopy Anchor Link

BarChartCopy Anchor Link

BarSeriesCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Grouped and stacked series

Horizontal bars

Materials

Category emphasis

API reference

BarChart

BarSeries

Shared components