# Simple pie chart (Chartist example)

> Three slices, each labelled with its share of the total.

`src/main.ts`:

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

const data = {
  series: [5, 3, 4]
};

pieChart('#chart', data, {
  labelInterpolationFnc: value =>
    Math.round((+value / data.series.reduce((a, b) => a + b)) * 100) + '%'
});
```

`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 } from 'chartist';

const data = {
  series: [5, 3, 4]
};

new PieChart('#chart', data, {
  labelInterpolationFnc: value =>
    Math.round((+value / data.series.reduce((a, b) => a + b)) * 100) + '%'
});
```