Bar charts

A bar chart takes the same data as a line chart: labels along one axis, a series per array. Each value becomes a bar that grows from zero, so the axis includes zero (unless you set low or high) and negative values hang below it.

barChart() takes a container, your data and options. The data shapes are shared by all chart types and explained in Data and options.

Grouped bars

Several series put their bars side by side, one group per label:

src/main.ts

import 'chartist/styles.css';
import { barChart } from 'chartist';

barChart('#chart', {
  labels: ['Jan', 'Feb', 'Mar', 'Apr'],
  series: [
    [5, 4, 3, 7],
    [3, 2, 9, 5],
    [1, 5, 8, 4]
  ]
});

Live

A null value leaves its bar out and keeps its place in the group.

Bar spacing

Two settings shape a group, and they live in different places. The distance between the bars of a group is layout, so it’s an option: seriesBarDistance, in pixels, 15 by default. The thickness of a bar is looks, so it’s CSS: bars are SVG lines, and --ct-bar-width (10px by default) sets their stroke width.

src/style.css

#chart {
  --ct-bar-width: 20px;
}

Live

Keep seriesBarDistance at least as large as the bar width, or the bars of a group overlap. More about the custom properties in Styling with CSS.

Stacked bars

With stackBars: true, the series of a label stack into one bar, and the value axis grows to fit the totals. seriesBarDistance has no effect here.

src/main.ts

import 'chartist/styles.css';
import { barChart } from 'chartist';

barChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      [800, 1200, 1400, 1300],
      [200, 400, 500, 300],
      [100, 200, 400, 600]
    ]
  },
  { stackBars: true }
);

Live

Stack modes

stackMode decides what happens when values have different signs:

`stackMode`	The stack
`'accumulate'` (default)	A running total: each bar starts where the previous one ended, so a negative value goes back down.
`'accumulate-relative'`	Positive values stack up from zero, negative values stack down from zero.
`'overlap'` or `true`	No stacking: every bar starts at zero and they overlap, the first series at the back.

'accumulate-relative' is the one for gains and losses:

import 'chartist/styles.css';
import { barChart } from 'chartist';

barChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      [5, 4, 6, 8],
      [-3, -1, -4, -2]
    ]
  },
  { stackBars: true, stackMode: 'accumulate-relative' }
);

The value axis fits both sides: up to the highest stack above zero and down to the lowest one below it.

Horizontal bars

horizontalBars: true turns the chart on its side: the labels move to the Y axis and the values to the X axis. The axis options move with them, so the label settings now go in axisY. Long labels need a wider offset:

src/main.ts

import 'chartist/styles.css';
import { barChart } from 'chartist';

barChart(
  '#chart',
  {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    series: [
      [5, 4, 3, 7, 5],
      [3, 2, 9, 5, 4]
    ]
  },
  {
    horizontalBars: true,
    // The labels are on the Y axis now: give them room.
    axisY: { offset: 70 }
  }
);

Live

The chart gets the ct-horizontal-bars class next to ct-chart-bar, for styles that only apply to horizontal bars.

Distributed series

Sometimes every bar is its own thing: sizes, categories, a profile rather than values over time. Pass a flat array of values and set distributeSeries: true. Each value becomes its own series, ct-series-a, ct-series-b and so on, so every bar gets its own color:

src/main.ts

import 'chartist/styles.css';
import { barChart } from 'chartist';

// A flat array: one value per label, and each bar is its own series.
barChart(
  '#chart',
  {
    labels: ['XS', 'S', 'M', 'L', 'XL'],
    series: [20, 60, 120, 200, 180]
  },
  { distributeSeries: true }
);

Live

Low and high

low and high fix the ends of the value axis, as on line charts, and so do the value axis’s own (axisY: { low: 10 }). Bars still start at zero: with a low above zero, the bars start at the bottom edge of the chart. The axis settings are in Axes and scales.

import 'chartist/styles.css';
import { barChart } from 'chartist';

barChart(
  '#chart',
  {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    series: [[5, 4, 3, 7]]
  },
  { high: 10 }
);

In the API reference: barChart and its options.

Next: line charts, or make bars respond to the screen.