# Pie chart with custom labels (Chartist example)

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

`src/main.ts`:

```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);
```

`index.html`:

```html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" src="/src/main.ts"></script>
  </head>
  <body>
    <div id="chart" style="height: 50vh"></div>
  </body>
</html>
```

The same chart with the 1.x classes (`src/main.classic.ts`):

```ts
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);
```