# Axis title (`chartist-plugin-axistitle`, Chartist plugin)

> Adds a title to the X and Y axes, with an offset and text anchor of your choice.

- Author: Alex Stanbury
- Source: https://github.com/astanb/chartist-plugin-axistitle, npm: https://www.npmjs.com/package/chartist-plugin-axistitle
- 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: line, bar
- Server rendering: no, it needs a browser
- Downloads: 45483 a month, last release 2019-12-19

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-axistitle@0.0.7/dist/chartist-plugin-axistitle.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.ctAxisTitle())]
  });
</script>
```

Example (`src/main.ts`):

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

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

lineChart(
  '#chart',
  {
    labels: [0, 15, 30, 45, 60, 75, 90],
    series: [[0, 1, 1, 2, 2, 3, 4]]
  },
  {
    // Room for the titles.
    chartPadding: { top: 20, right: 10, bottom: 30, left: 20 },
    axisY: { onlyInteger: true },
    plugins: [
      fromLegacyPlugin(
        plugins.ctAxisTitle({
          axisX: {
            axisTitle: 'Time (mins)',
            axisClass: 'ct-axis-title',
            offset: { x: 0, y: 50 },
            textAnchor: 'middle'
          },
          axisY: {
            axisTitle: 'Goals',
            axisClass: 'ct-axis-title',
            offset: { x: 0, y: -1 },
            flipTitle: false
          }
        })
      )
    ]
  }
);
```

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