Distributed series

One series of clothing sizes, each value drawn as its own bar and color.

src/main.ts

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

barChart(
  '#chart',
  {
    labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
    series: [20, 60, 120, 200, 180, 20, 10]
  },
  {
    distributeSeries: true
  }
);

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

new BarChart(
  '#chart',
  {
    labels: ['XS', 'S', 'M', 'L', 'XL', 'XXL', 'XXXL'],
    series: [20, 60, 120, 200, 180, 20, 10]
  },
  {
    distributeSeries: true
  }
);

Live

Open in the playground View as MarkdownSwitch to 1.x above the code to see the same chart written with the Chartist 1.x classes.