Docs › Chart types

Bar chart

Grouped, stacked, 100% stacked, horizontal and negative bars.

type: 'bar' puts several series side by side. Bars are rounded at the value end (barRadius, default 6) and square at the baseline. Hovering highlights the whole band and lists every value in it.

Live example

Code for this example

createChart('#chart', {
  type: 'bar',
  title: 'Quarterly revenue',
  prefix: '$',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: '2025', data: [182000, 205000, 198000, 241000] },
      { name: '2026', data: [214000, 236000, 251000, null] },
    ],
  },
});

Stacks and totals

stacked: true piles every bar series into one stack and stackTotals: true writes the total on top. Give series a stack: 'name' to make several stacks.

Live example

Code for this example

createChart('#chart', {
  type: 'bar',
  title: 'Sign-ups by age',
  stacked: true,
  stackTotals: true,
  data: {
    labels: ['Teens', '20s', '30s', '40s', '50+'],
    series: [
      { name: 'Women', data: [820, 4210, 3880, 2140, 960] },
      { name: 'Men', data: [640, 3650, 4120, 2530, 1180] },
    ],
  },
});

Horizontal bars (rankings)

Long names and rankings (top 10 products) read better with horizontal: true. Sort largest first. dataLabels: true writes the value at the end of each bar.

Live example

Code for this example

createChart('#chart', {
  type: 'bar',
  horizontal: true,
  title: 'Best sellers',
  dataLabels: true,
  data: {
    labels: ['Wireless earbuds', 'Power bank 10000mAh', 'USB-C cable', 'Phone stand', 'Laptop sleeve'],
    series: [{ name: 'Units', data: [1840, 1520, 1310, 980, 760] }],
  },
});

100% stacked

stacked: 'percent' makes every band add up to 100%, for survey answers and other shares.

Negative values

Negative bars go below the zero line. negativeColor colors them, or palette: 'korea' uses red for up and blue for down, as Korean stock apps do.

Live example

Code for this example

createChart('#chart', {
  type: 'bar',
  title: 'Change from last month',
  unit: '%',
  palette: 'korea',
  data: {
    labels: ['May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    series: [{ name: 'Change', data: [4.2, -1.8, 6.5, -3.1, 2.4, 8.9] }],
  },
});

Option	Default	What it does
`horizontal`	false	Horizontal bars
`stacked`	false	`true` or `'percent'`
`stackTotals`	false	Total above stacked bars
`dataLabels`	false	Value at the bar end (`true` or `'end'`)
`barRadius`	6	Corner radius at the value end (px)
`barWidth`	0.82 (0.78 grouped)	Share of the band a bar group fills (0–1)
`negativeColor`	-	Color of bars below zero
`gradient`	true	Soft vertical gradient