Comparison · Basic

Bar chart

Grouped, stacked, 100% and horizontal bars, with optional lines on the same axis.

Open in playground

Use when: Comparing sizes across categories precisely
Avoid when: The flow over time is the point (a line works better)

Try it

Reduce motion

Bar chart

Revenue by quarter (100M KRW)

Domestic
Overseas

Bar chart data
Q1 · Domestic	42
Q1 · Overseas	18
Q2 · Domestic	48
Q2 · Overseas	24
Q3 · Domestic	51
Q3 · Overseas	33
Q4 · Domestic	55
Q4 · Overseas	41

Hover over the chart, or Tab in and use the arrow keys to move between items. The numbers are sample data.

Variants

Named looks for this chart. Each one is the example above with a few options or fields changed. The CLI (ztd-charts example bar --variant <id>) and the MCP server know the same names.

Grouped

Revenue by quarter (100M KRW)

Domestic
Overseas

100% stacked

Revenue by quarter (100M KRW)

Domestic
Overseas

Horizontal

Revenue by quarter (100M KRW)

Domestic
Overseas

Code

BarChart.tsx

import { ChartCard, BarChart } from "ztd-charts";

const data = [
  {"quarter":"Q1","team":"Domestic","revenue":42},
  {"quarter":"Q1","team":"Overseas","revenue":18},
  {"quarter":"Q2","team":"Domestic","revenue":48},
  {"quarter":"Q2","team":"Overseas","revenue":24},
  {"quarter":"Q3","team":"Domestic","revenue":51},
  {"quarter":"Q3","team":"Overseas","revenue":33},
  // … 2 more rows
];

export function Example() {
  return (
    <ChartCard number="16" title="Bar chart" subtitle="Revenue by quarter (100M KRW)" takeaway="Overseas grows its share every quarter" level="basic" replay>
      <BarChart
        data={data}
        x="quarter"
        y="revenue"
        series="team"
        layout="stacked"
        highlight="Overseas"
      />
    </ChartCard>
  );
}

Props

<BarChart> takes these props. Rows marked Common work the same on every chart.

32 props

Prop	Type	Default	Description
`data`RequiredAn array of objects. Pass CSV, REST or database rows as they areobject[]	object[]	-	An array of objects. Pass CSV, REST or database rows as they are
`x`RequiredCategory fieldstring \| (d, i) => string	string \| (d, i) => string	-	Category field
`y`RequiredValue field. An array for wide tablesstring \| (d, i) => number \| string[]	string \| (d, i) => number \| string[]	-	Value field. An array for wide tables
`series`Series fieldstring \| (d, i) => string	string \| (d, i) => string	-	Series field
`line`Lines over vertical bars on the same axis, such as a target or last year. An array for several. Bars stay gray unless highlight is set, and with series the line averages rows of the same xstring \| (d, i) => number \| string[]	string \| (d, i) => number \| string[]	-	Lines over vertical bars on the same axis, such as a target or last year. An array for several. Bars stay gray unless highlight is set, and with series the line averages rows of the same x
`layout`How series are arranged"grouped" \| "stacked" \| "percent"Default `"grouped"`	"grouped" \| "stacked" \| "percent"	"grouped"	How series are arranged
`orientation`Direction"vertical" \| "horizontal"Default `"vertical"`	"vertical" \| "horizontal"	"vertical"	Direction
`sort`Sort by value (single series)booleanDefault `false`	boolean	false	Sort by value (single series)
`aggregate`How rows with the same x (and series) combine: "sum" adds them, "mean" averages, "last" keeps the last row, "count" counts rows"sum" \| "mean" \| "last" \| "count"Default `"sum"`	"sum" \| "mean" \| "last" \| "count"	"sum"	How rows with the same x (and series) combine: "sum" adds them, "mean" averages, "last" keeps the last row, "count" counts rows
`annotations`Notes drawn on vertical bars: target band, period, reference line, event, forecast (later bars turn pale with a dashed outline), trend line. [{ type, x, y, from, label }]annotations	annotations	-	Notes drawn on vertical bars: target band, period, reference line, event, forecast (later bars turn pale with a dashed outline), trend line. [{ type, x, y, from, label }]
`hidden`Series to hide. Colors stay as if every series were shown. With card.legend "toggle", viewers can show them againstring[]	string[]	-	Series to hide. Colors stay as if every series were shown. With card.legend "toggle", viewers can show them again
`height`CommonHeight in px. Without it, each chart picks a default that fits its widthnumber	number	-	Height in px. Without it, each chart picks a default that fits its width
`width`CommonFixed width in px. Without it, the chart fits its parentnumber	number	-	Fixed width in px. Without it, the chart fits its parent
`highlight`CommonItem to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"number \| string \| (number\|string)[] \| "max" …	number \| string \| (number\|string)[] \| "max" …	-	Item to highlight. An index, a name, an array, or "max" \| "min" \| "first" \| "last" \| "none"
`format`CommonValue format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options"number" \| "percent" \| "compact" \| …	"number" \| "percent" \| "compact" \| …	-	Value format. "number" \| "integer" \| "percent" (values are already percents: 42 → "42%") \| "ratio" (0.42 → "42%") \| "compact" \| "currency" (KRW for Korean locales, otherwise USD; for another currency pass Intl options with currency) \| "decimal" or Intl.NumberFormat options
`unit`CommonUnit appended to values. For example "%" or "ms"string	string	-	Unit appended to values. For example "%" or "ms"
`locale`CommonLocale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider localestringDefault `"en-US"`	string	"en-US"	Locale for numbers, dates and the text a chart writes itself (tooltips, screen reader sentences). "ko" or "ko-*" switches to Korean. Falls back to the ThemeProvider locale
`animate`CommonEntry and update animationbooleanDefault `true`	boolean	true	Entry and update animation
`duration`CommonAnimation length (ms)number	number	-	Animation length (ms)
`easing`CommonMotion curve"spring" \| "easeOut" \| "easeInOut" \| "linear"Default `"spring"`	"spring" \| "easeOut" \| "easeInOut" \| "linear"	"spring"	Motion curve
`stagger`CommonDelay between items as they enter (ms)number	number	-	Delay between items as they enter (ms)
`reducedMotion`Common"auto" follows the OS setting. true always turns motion offanyDefault `"auto"`	any	"auto"	"auto" follows the OS setting. true always turns motion off
`animateOnView`CommonPlay when the chart scrolls into viewbooleanDefault `true`	boolean	true	Play when the chart scrolls into view
`showLabels`CommonLabels drawn on the chart (values and names)booleanDefault `true`	boolean	true	Labels drawn on the chart (values and names)
`tooltip`CommonShow tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left outtooltipDefault `true`	tooltip	true	Show tooltips. { template: "{label} · {value} · owner {owner}" } writes them: {label}, {value}, {series} or any other column of the row. \n starts a new line, and a line with an empty value is left out
`syncId`CommonCharts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside itstring	string	-	Charts with the same syncId show the hovered x together (line, area, bar, candlestick). <ChartGrid sync> sets one for every chart inside it
`ariaLabel`CommonName for screen readersstring	string	-	Name for screen readers
`description`CommonDescription for screen readers. Built from the data when omittedstring	string	-	Description for screen readers. Built from the data when omitted
`onHover`CommonRuns when hover or keyboard focus moves to another item(e: ChartEvent \| null) => void	(e: ChartEvent \| null) => void	-	Runs when hover or keyboard focus moves to another item
`onClick`CommonRuns on click, Enter or Space(e: ChartEvent) => void	(e: ChartEvent) => void	-	Runs on click, Enter or Space
`replayKey`CommonReplays the entry animation when it changesstring \| number	string \| number	-	Replays the entry animation when it changes
`theme`CommonChanges theme tokens for this chart onlyPartial<ChartTheme>	Partial<ChartTheme>	-	Changes theme tokens for this chart only

Try it

Variants

Code

Props

Also in Comparison