Gauge chart

Four values on a half ring: a total of twice their sum leaves the lower half empty.

src/main.ts

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

pieChart(
  '#chart',
  {
    series: [20, 10, 30, 40]
  },
  {
    donut: true,
    donutWidth: 60,
    startAngle: 270,
    total: 200,
    showLabel: false
  }
);

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

new PieChart(
  '#chart',
  {
    series: [20, 10, 30, 40]
  },
  {
    donut: true,
    donutWidth: 60,
    startAngle: 270,
    total: 200,
    showLabel: false
  }
);

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.