Chartist

Search

Find a guide, an API entry or an example.

Try

Bi-polar bar chart

Ten weeks of positive and negative values around zero, with every other label shown.

src/main.ts
import 'chartist/styles.css';
import { barChart, type BarChartPresetOptions } from 'chartist';

const data = {
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]]
};

const options: BarChartPresetOptions = {
  high: 10,
  low: -10,
  axisX: {
    labelInterpolationFnc(value, index) {
      return index % 2 === 0 ? value : null;
    }
  }
};

barChart('#chart', data, options);
Live
Open in the playgroundView as MarkdownSwitch to 1.x above the code to see the same chart written with the Chartist 1.x classes.