Pie chart with custom labels

Fruit slices labelled with an initial on small screens and the full name, pushed outside, on larger ones.

src/main.ts

import 'chartist/styles.css';
import {
  pieChart,
  type PieChartPresetOptions,
  type PresetResponsiveOptions
} from 'chartist';

const data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]
};

const options: PieChartPresetOptions = {
  labelInterpolationFnc: value => String(value)[0]
};

const responsiveOptions: PresetResponsiveOptions<PieChartPresetOptions> = [
  [
    'screen and (min-width: 640px)',
    {
      chartPadding: 30,
      labelOffset: 100,
      labelDirection: 'explode',
      labelInterpolationFnc: value => value
    }
  ],
  [
    'screen and (min-width: 1024px)',
    {
      labelOffset: 80,
      chartPadding: 20
    }
  ]
];

pieChart('#chart', data, options, responsiveOptions);

import 'chartist/styles.css';
import {
  PieChart,
  type PieChartOptions,
  type ResponsiveOptions
} from 'chartist';

const data = {
  labels: ['Bananas', 'Apples', 'Grapes'],
  series: [20, 15, 40]
};

const options: PieChartOptions = {
  labelInterpolationFnc: value => String(value)[0]
};

const responsiveOptions: ResponsiveOptions<PieChartOptions> = [
  [
    'screen and (min-width: 640px)',
    {
      chartPadding: 30,
      labelOffset: 100,
      labelDirection: 'explode',
      labelInterpolationFnc: value => value
    }
  ],
  [
    'screen and (min-width: 1024px)',
    {
      labelOffset: 80,
      chartPadding: 20
    }
  ]
];

new PieChart('#chart', data, options, responsiveOptions);

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.