# Point labels (`chartist-plugin-pointlabels`, Chartist plugin)

> Writes each value next to its point, so readers see exact numbers without hovering.

- Author: Gion Kunz
- Source: https://github.com/gionkunz/chartist-plugin-pointlabels, npm: https://www.npmjs.com/package/chartist-plugin-pointlabels
- License: WTFPL
- Written for the Chartist 0.x API; runs on v2 with `chartist/compat` (a script that reads the global `Chartist`, for backwards compatibility)
- Charts: line, bar
- Server rendering: no, it needs a browser
- Downloads: 11888 a month, last release 2018-02-18

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-pointlabels@0.0.6/dist/chartist-plugin-pointlabels.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.ctPointLabels())]
  });
</script>
```

Example (`src/main.ts`):

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

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

lineChart(
  '#chart',
  {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [[12.5, 18.25, 9.75, 21]]
  },
  {
    chartPadding: { top: 30, right: 30, left: 30 },
    // The labels show every value, so the Y axis keeps only its grid.
    axisY: { showLabel: false, offset: 0 },
    plugins: [
      fromLegacyPlugin(
        plugins.ctPointLabels({
          textAnchor: 'middle',
          labelInterpolationFnc: (value: number) => `$${value.toFixed(2)}`
        })
      )
    ]
  }
);
```

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