# Fill donut (`chartist-plugin-fill-donut`, Chartist plugin)

> Draws a copy of the donut behind it, so an animated donut looks filled from the start, and puts HTML labels in or around it. Together they make gauges.

- Author: moxx
- Source: https://github.com/moxx/chartist-plugin-fill-donut, npm: https://www.npmjs.com/package/chartist-plugin-fill-donut
- License: MIT
- Written for the Chartist 0.x API; runs on v2 with `chartist/compat` (a script that reads the global `Chartist`, for backwards compatibility)
- Charts: pie
- Server rendering: no, it needs a browser
- Downloads: 5181 a month, last release 2016-11-05

Setup:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';
</script>
<script defer src="https://cdn.jsdelivr.net/npm/chartist-plugin-fill-donut@0.1.4/dist/chartist-plugin-fill-donut.js"></script>
<script type="module">
  import { lineChart } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/index.min.js';
  import { fromLegacyPlugin } from 'https://cdn.jsdelivr.net/npm/chartist@2.0.0-rc.2/dist/compat.min.js';

  lineChart('#chart', data, {
    plugins: [fromLegacyPlugin(Chartist.plugins.fillDonut())]
  });
</script>
```

Example (`src/main.ts`):

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

// Plugin scripts register on the global `Chartist`.
const { plugins } = Chartist;

// A gauge, as in the plugin's README: 160 of 260 on a ring that leaves a
// gap at the bottom. The second slice is the rest of the scale; it's hidden,
// and the plugin's copy of it, drawn behind, is the track.
pieChart(
  '#chart',
  { series: [160, 100] },
  {
    donut: true,
    donutWidth: 20,
    startAngle: 210,
    total: 260,
    showLabel: false,
    plugins: [
      fromLegacyPlugin(
        plugins.fillDonut({
          items: [{ content: '<strong>160</strong> mph' }]
        })
      )
    ]
  }
);
```

All plugins: https://chartist.dev/plugins.md