# chartist-plugin-axistitle

> Axis Title Plugin for Chartist.js

Latest version **0.0.7** (published 2019-12-19) · 0 weekly downloads

## Install

```sh
npm install chartist-plugin-axistitle
pnpm add chartist-plugin-axistitle
yarn add chartist-plugin-axistitle
bun add chartist-plugin-axistitle
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2019-12-19 |
| First published | 2015-10-13 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.8.0 |
| Dependencies | 0 |
| Unpacked size | 19.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 37 |
| Author | Alex Stanbury |
| Maintainers | alexstanbury |
| Keywords | chartist, plugin |

## Links

- npm: https://www.npmjs.com/package/chartist-plugin-axistitle
- Repository: https://github.com/alexstanbury/chartist-plugin-axistitle
- Homepage: https://alexstanbury.github.io/chartist-plugin-axistitle
- Issues: https://github.com/alexstanbury/chartist-plugin-axistitle/issues
- npm.io page: https://npm.io/package/chartist-plugin-axistitle

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.0.7 (latest) — 2019-12-19
- 0.0.4 — 2018-01-19
- 0.0.1 — 2015-10-13

## README

# Axis title plugin for Chartist.js

This plugin allows the creation and placement of axis titles. The plugin will throw an error if it is applied to a chart that contains no axes, such as a Pie chart.

In order to use it, you will need to include the excellent charting library Chartist.js in your page.

http://gionkunz.github.io/chartist-js/index.html

## Installation

Install using npm:

`npm install chartist-plugin-axistitle`

## Available options and their defaults

```javascript
var defaultOptions = {
  // The title to be displayed on the axis. If at least one axis title is not supplied then an error is thrown.
  // This can also be passed a function to enable simple updating of the title if your chart data changes.
  axisTitle: "",

  // One or more class names to be added to the axis title.
  // Multiple class names should be separated by a space.
  // This can also be passed a function to enable simple updating of the classes if your chart data changes.
  axisClass: "ct-axis-title",

  // How much to offset the title by.
  // Please note, x and y offset values for axisY are flipped due to the rotation of the axisY title by 90 degrees.
  // Therefore changing the x value moves up/down the chart, while changing y moves left/right.
  offset: { x: 0, y: 0 },

  // Defines the anchoring of the title text. Possible values are 'start', 'end' and 'middle'.
  textAnchor: "middle",

  // Whether to flip the direction of the text. Note - This can only be used on axis Y.
  flipTitle: false
};
```

## Sample usage

```javascript
var chart = new Chartist.Line(
  ".ct-chart",
  {
    labels: [
      "0-15",
      "16-30",
      "31-45",
      "46-60",
      "61-75",
      "76-90",
      "91-105",
      "106-120"
    ],
    series: [[1, 3, 7, 12, 1, 2, 1, 0]]
  },
  {
    chartPadding: {
      top: 20,
      right: 0,
      bottom: 20,
      left: 0
    },
    axisY: {
      onlyInteger: true
    },
    plugins: [
      Chartist.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
        }
      })
    ]
  }
);
```

## Example

Install using `npm install` then run/edit the example.html file to see the plugin in action.

## Build

Use `npm run build` to build a minimised version.

---
_Source: https://npm.io/package/chartist-plugin-axistitle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._