Combo Chart · Kind UI charts

Loading chart…

Monthly production in units
Month	Capacity (units)	Shipped (units)	Target (units)
Jan	960	640	700
Feb	960	730	720
Mar	1040	780	760
Apr	1040	860	820
May	1120	920	880
Jun	1120	1020	960

example.tsx

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

const data = [
  { period: "Jan", capacity: 960, shipped: 640, target: 700 },
  { period: "Feb", capacity: 960, shipped: 730, target: 720 },
  { period: "Mar", capacity: 1040, shipped: 780, target: 760 },
  { period: "Apr", capacity: 1040, shipped: 860, target: 820 },
  { period: "May", capacity: 1120, shipped: 920, target: 880 },
  { period: "Jun", capacity: 1120, shipped: 1020, target: 960 },
];
const config = {
  capacity: {
    label: "Capacity · units",
    color: "#b2a0ef",
    formatValue: (value) => `${value} units`,
  },
  shipped: { label: "Shipped · units", color: "#733bff", formatValue: (value) => `${value} units` },
  target: { label: "Target · units", color: "#087f78", formatValue: (value) => `${value} units` },
} satisfies Chart.SeriesConfig;

export function ProductionComboChart() {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.ComboChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 20, bottom: 8, left: 16 }}
          aria-label="Monthly production, capacity and target in units"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={40}
          />
          <Chart.YAxis
            domain={[0, 1200]}
            ticks={[0, 400, 800, 1200]}
            width="auto"
            axisLine={false}
            tickLine={false}
            tickMargin={8}
          />
          <Chart.AreaSeries
            dataKey="capacity"
            type="stepAfter"
            fillOpacity={0.18}
            strokeWidth={1}
          />
          <Chart.BarSeries dataKey="shipped" maxBarSize={32} radius={[4, 4, 0, 0]} />
          <Chart.LineSeries
            dataKey="target"
            type="linear"
            strokeWidth={2.5}
            strokeDasharray="6 4"
            dot={false}
          />
          <Chart.Tooltip maxWidth={200} />
        </Chart.ComboChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Usage

Combine BarSeries, AreaSeries and LineSeries in one plot.

Composition

<Chart.Root config={config}>
  <Chart.Legend />
  <Chart.ResponsiveContainer width="100%" height={280}>
    <Chart.ComboChart data={data} animate accessibilityLayer aria-label="Monthly production in units">
      <Chart.CartesianGrid vertical={false} />
      <Chart.XAxis dataKey="period" />
      <Chart.YAxis domain={[0, 1200]} />
      <Chart.AreaSeries dataKey="capacity" type="stepAfter" fillOpacity={0.18} />
      <Chart.BarSeries dataKey="shipped" maxBarSize={32} />
      <Chart.LineSeries dataKey="target" type="linear" dot={false} strokeDasharray="6 4" />
      <Chart.Tooltip />
    </Chart.ComboChart>
  </Chart.ResponsiveContainer>
</Chart.Root>

Choose each series’ interpolation and paint explicitly. ComboChart uses native composed-chart props, without Line’s configured series or xDataKey shortcuts.

Stacks and two axes

Revenue bars share stack and axis IDs; margin uses a separate percentage axis. Compare each measure on its own scale; matching vertical positions do not mean equal values.

Loading chart…

Monthly revenue and margin
Month	Retail (USD)	Wholesale (USD)	Margin (%)
Jan	42000	26000	18
Feb	47000	28000	20
Mar	44000	34000	19
Apr	52000	31000	23
May	58000	36000	25
Jun	63000	39000	27

example.tsx

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

const data = [
  { period: "Jan", retail: 42000, wholesale: 26000, margin: 18 },
  { period: "Feb", retail: 47000, wholesale: 28000, margin: 20 },
  { period: "Mar", retail: 44000, wholesale: 34000, margin: 19 },
  { period: "Apr", retail: 52000, wholesale: 31000, margin: 23 },
  { period: "May", retail: 58000, wholesale: 36000, margin: 25 },
  { period: "Jun", retail: 63000, wholesale: 39000, margin: 27 },
];
const dollars = (value: Chart.TooltipValueType) =>
  typeof value === "number" ? `$${value.toLocaleString("en-US")}` : String(value);
const config = {
  retail: { label: "Retail · USD", color: "#733bff", formatValue: dollars },
  wholesale: { label: "Wholesale · USD", color: "#b2a0ef", formatValue: dollars },
  margin: { label: "Margin · %", color: "#087f78", formatValue: (value) => `${value}%` },
} satisfies Chart.SeriesConfig;

export function RevenueMarginChart() {
  const [visibleSeries, setVisibleSeries] = useState<string[]>(["retail", "wholesale", "margin"]);
  return (
    <Chart.Root
      config={config}
      visibleSeries={visibleSeries}
      onVisibleSeriesChange={setVisibleSeries}
    >
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.ComboChart
          data={data}
          animate
          accessibilityLayer
          margin={{ top: 20, right: 0, bottom: 8, left: 16 }}
          aria-label="Stacked monthly revenue in US dollars, with margin percentage on the right axis"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={40}
          />
          <Chart.YAxis
            yAxisId="revenue"
            domain={[0, 120000]}
            ticks={[0, 40000, 80000, 120000]}
            tickFormatter={(value: number) => `$${value / 1000}k`}
            width="auto"
            axisLine={false}
            tickLine={false}
            tickMargin={8}
          />
          <Chart.YAxis
            yAxisId="margin"
            orientation="right"
            domain={[0, 40]}
            ticks={[0, 10, 20, 30, 40]}
            tickFormatter={(value: number) => `${value}%`}
            width="auto"
            axisLine={false}
            tickLine={false}
            tickMargin={8}
          />
          <Chart.BarSeries dataKey="retail" yAxisId="revenue" stackId="revenue" maxBarSize={32} />
          <Chart.BarSeries
            dataKey="wholesale"
            yAxisId="revenue"
            stackId="revenue"
            maxBarSize={32}
          />
          <Chart.LineSeries
            dataKey="margin"
            yAxisId="margin"
            type="linear"
            strokeWidth={2.5}
            dot={false}
          />
          <Chart.Tooltip maxWidth={200} />
        </Chart.ComboChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Legend toggles recalculate visible stacks. Matching stackId values stack compatible series on matching axes; they do not merge families. Normalized stacks require explicit axis and tooltip formatting.

Family motion

Choose independent, shared or line-only timing. Independent mode reveals bars over 1000ms and the line over 600ms, showing Area immediately. The example remounts to replay.

Loading chart…

Monthly production in units
Month	Capacity (units)	Shipped (units)	Target (units)
Jan	960	640	700
Feb	960	730	720
Mar	1040	780	760
Apr	1040	860	820
May	1120	920	880
Jun	1120	1020	960

example.tsx

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

const data = [
  { period: "Jan", capacity: 960, shipped: 640, target: 700 },
  { period: "Feb", capacity: 960, shipped: 730, target: 720 },
  { period: "Mar", capacity: 1040, shipped: 780, target: 760 },
  { period: "Apr", capacity: 1040, shipped: 860, target: 820 },
  { period: "May", capacity: 1120, shipped: 920, target: 880 },
  { period: "Jun", capacity: 1120, shipped: 1020, target: 960 },
];
const config = {
  capacity: {
    label: "Capacity · units",
    color: "#b2a0ef",
    formatValue: (value) => `${value} units`,
  },
  shipped: { label: "Shipped · units", color: "#733bff", formatValue: (value) => `${value} units` },
  target: { label: "Target · units", color: "#087f78", formatValue: (value) => `${value} units` },
} satisfies Chart.SeriesConfig;

type Entrance = "independent" | "together" | "lineOnly";
const entrances = {
  independent: {
    areaReveal: false,
    barReveal: { revealDurationMs: 1000 },
    lineReveal: { revealDurationMs: 600 },
  },
  together: { revealDurationMs: 900 },
  lineOnly: { areaReveal: false, barReveal: false, lineReveal: { revealDurationMs: 900 } },
} satisfies Record<Entrance, Chart.ComboAnimation>;

export function ProductionMotionChart({ entrance = "independent" }: { entrance?: Entrance }) {
  return (
    <Chart.Root config={config}>
      <Chart.Legend />
      <Chart.ResponsiveContainer width="100%" height={280}>
        <Chart.ComboChart
          key={entrance}
          data={data}
          animate={entrances[entrance]}
          accessibilityLayer
          margin={{ top: 20, right: 20, bottom: 8, left: 0 }}
          aria-label="Monthly production, capacity and target in units"
        >
          <Chart.CartesianGrid vertical={false} strokeDasharray="3 3" />
          <Chart.XAxis
            dataKey="period"
            axisLine={false}
            tickLine={false}
            tickMargin={10}
            height={40}
          />
          <Chart.YAxis
            domain={[0, 1200]}
            ticks={[0, 400, 800, 1200]}
            width={96}
            axisLine={false}
            tickLine={false}
            tickMargin={8}
          />
          <Chart.AreaSeries
            dataKey="capacity"
            type="stepAfter"
            fillOpacity={0.18}
            strokeWidth={1}
          />
          <Chart.BarSeries dataKey="shipped" maxBarSize={32} radius={[4, 4, 0, 0]} />
          <Chart.LineSeries
            dataKey="target"
            type="linear"
            strokeWidth={2.5}
            strokeDasharray="6 4"
            dot={false}
          />
          <Chart.Tooltip maxWidth={200} />
        </Chart.ComboChart>
      </Chart.ResponsiveContainer>
    </Chart.Root>
  );
}

Line/Area reveal across the plot; Bar reveals from numeric zero clamped to its domain. Interaction or data/layout/visibility changes finish entrance; reduced motion disables Kind motion.

API reference

Focused props for explicit composition; upstream references cover additional native geometry.

ComboChart

Prop	Type	Default	Description
`data`	`Row[]`	—	Shared category observations; Kind does not aggregate or transform them.
`animate`	`boolean \| ComboAnimation`	`false`	Chart-owned entrance and inspection motion, respecting reduced motion.
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Native chart orientation; supply matching category and numeric axes.
`stackOffset`	`"none" \| "expand" \| "wiggle" \| "silhouette" \| "sign" \| "positive"`	`"none"`	Native stack calculation; formatting remains consumer-owned.
`barCategoryGap` / `barGap`	`number \| string`	`"10%"` / `4`	Category and grouped-bar spacing in native geometry.
`accessibilityLayer`	`boolean`	`true` in Recharts	Keyboard category inspection; enabled explicitly in these components.
`aria-label` / `aria-labelledby`	`string`	—	Consumer-supplied accessible plot name.
`children`	`ReactNode`	—	Explicit axes, grid, series and tooltip.

See Recharts ComposedChart.

ComboAnimation

Pass to ComboChart.animate. Family options affect entrances only; hover transitions remain shared. Live reduced-motion changes also settle motion.

Prop	Type	Default	Description
`revealDurationMs`	`number`	`1000`	Shared entrance duration in milliseconds.
`revealEasing`	`Transition["ease"]`	`[0.25, 0.1, 0.25, 1]`	Motion entrance easing.
`lineReveal` / `areaReveal` / `barReveal`	`false \| { revealDurationMs?: number; revealEasing?: Transition["ease"] }`	Shared options	Override one family's duration or easing; `false` skips its entrance.
`hoverTransition`	`Transition`	Spring: `210` stiffness, `28` damping, `0.8` mass	Shared inspection motion; family entrance options do not override it.

BarSeries

Prop	Type	Default	Description
`dataKey`	`string \| number \| ((row: Row) => unknown)`	Required	Native value field or accessor.
`seriesKey`	`string`	String `dataKey`	Config and visibility identity; supply for controlled accessor or numeric keys.
`yAxisId` / `xAxisId`	`string \| number`	`0`	Match the explicit native axes.
`stackId`	`string \| number`	—	Stack bars on matching axes; omit for grouped bars.
`maxBarSize`	`number`	—	Bound native bar thickness.
`radius`	`number \| [number, number, number, number]`	`0`	Native corners; stack cap geometry remains consumer-owned.
`fill`	`string`	Config color	Explicit paint override.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Static bar finish; custom shape, filter or active renderer retains ownership.

Kind disables native per-series animation so ComboChart owns entrances. See Recharts Bar.

LineSeries

Prop	Type	Default	Description
`dataKey`	`string \| number \| ((row: Row) => unknown)`	Required	Native line values.
`seriesKey`	`string`	String `dataKey`	Config and visibility identity.
`yAxisId` / `xAxisId`	`string \| number`	`0`	Bind the line to its scale; margin uses the percentage axis.
`type`	`"basis" \| "basisClosed" \| "basisOpen" \| "bumpX" \| "bumpY" \| "bump" \| "linear" \| "linearClosed" \| "natural" \| "monotoneX" \| "monotoneY" \| "monotone" \| "step" \| "stepBefore" \| "stepAfter"` or custom curve function	`"linear"`	Native interpolation.
`stroke` / `strokeDasharray`	`string`	Config color / —	Override line paint and distinguish targets with dashes.
`dot`	`boolean` or native dot props/renderer	`true`	Ordinary point marks; these components disable them.
`connectNulls`	`boolean`	`false`	Connect gaps explicitly.

Line material choices apply to the line independently of Area and Bar. See Recharts Line and Line components.

AreaSeries

Prop	Type	Default	Description
`dataKey`	`string \| number \| ((row: Row) => unknown)`	Required	Native area values.
`seriesKey`	`string`	String `dataKey`	Config and visibility identity.
`yAxisId` / `xAxisId`	`string \| number`	`0`	Bind the area to matching axes.
`type`	`"basis" \| "basisClosed" \| "basisOpen" \| "bumpX" \| "bumpY" \| "bump" \| "linear" \| "linearClosed" \| "natural" \| "monotoneX" \| "monotoneY" \| "monotone" \| "step" \| "stepBefore" \| "stepAfter"` or custom curve function	`"linear"`	Choose interpolation per area.
`stackId`	`string \| number`	—	Stack areas on matching axes.
`fill` / `stroke`	`string`	Config color	Override fill and outline independently.
`fillOpacity`	`number`	`0.6` in Recharts	Keep the filled context legible behind other marks.
`material`	`"plain" \| "paper" \| "clay" \| "glow"`	`"plain"`	Static area finish; explicit shape or filter wins.

See Recharts Area and Area components.

Shared components

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

UsageCopy Anchor Link

Stacks and two axesCopy Anchor Link

Family motionCopy Anchor Link

API referenceCopy Anchor Link

ComboChartCopy Anchor Link

ComboAnimationCopy Anchor Link

BarSeriesCopy Anchor Link

LineSeriesCopy Anchor Link

AreaSeriesCopy Anchor Link

Shared componentsCopy Anchor Link

On this page

Usage

Stacks and two axes

Family motion

API reference

ComboChart

ComboAnimation

BarSeries

LineSeries

AreaSeries

Shared components