Chartist - Plugins

Overview

What's a plugin?

Plugins allow you to extend the basic functionality of your charts. You can develop your own plugins or use plugins that others have already developed.

How to use plugins

Once you have included a plugin in your project you can use it in your chart by specifying it explicitly in the plugins section of your chart configuration. Check the List of plugins section to see what plugins you can use.

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3, 4, 5, 6, 7],
  series: [
    [1, 5, 3, 4, 6, 2, 3],
    [2, 4, 2, 5, 4, 3, 6]
  ]
}, {
  plugins: [
    ctPointLabels({
      textAnchor: 'middle'
    })
  ]
});
Order of specification
Plugins are chainable and the order of specification in the plugins array of your configuration is important for the end result.

Chartist.js expects an array of plugin functions to be present in the plugins array of the chart configuration. Usually plugins should be written as function factories so you can pass additional parameters and options to the factory which is creating the plugin function and returns it.

Available plugins

Here you can find a list of known plugins. Usually plugins should be available from both Bower and NPM for installation. If you have developed your own plugin but can't find it here, you should create a pull request for this page and add your plugin to the list.

Accessibility Plugin

285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision. We should stop the discrimination against our fellow human and, by fairly little effort and following best practices, make our content on the web accessible.

The accessibility plugin makes your chart accessible for blind people. It automatically generates visually hidden accessibility tables that allow you to describe your chart for blind people easily. This plugin was tested with NVDA and JAWS, and provides all necessary things for building an accessible chart.

By simply including this plugin with default configurations you will already make your charts accessible to blind people! If you put in 5 minutes effort in customizing the configuration with meaningful content, you will actually even make them enjoy your charts!

Author:Gion Kunz
Link:chartist-plugin-accessibility

Tooltip Plugin

The tooltip plugin makes it super simple to add tooltips to most of your charts which can often increase it's usability.

By simply including this plugin with default configurations you will already make your charts get some tooltips showing.

Author:Markus Padourek
Link:chartist-plugin-tooltip

Point Label Plugin

The point label plugin can be used if you like to add simple labels on top of your data points on line charts. This is usefull if you'd like the user to see the exact values of the data without any additional interaction.

Author:Gion Kunz
Link:chartist-plugin-pointlabels

Axis Title Plugin

The axis title plugin allows you to add simple titles to your axes.

Author:Alex Stanbury
Link:chartist-plugin-axistitle

Threshold Plugin

This Chartist plugin can be used to divide your Line or Bar chart with a threshold.

Author:Gion Kunz
Link:chartist-plugin-threshold

FillDonut Plugin

Let animated donuts look filled and provide options for append labels and html to the donut chart. This plugin draw the donut a second time but without delay and animation, so it animation will overlaps and looks like the fill the donut. Also your a possible to add multiple html-labels to the donut on different positions.

Author:Moxx
Link:chartist-plugin-fill-donut

Zoom Plugin

The zoom plugin allows you to zoom into charts.

Author:Hannes Kamecke
Link:chartist-plugin-zoom

Target Line Plugin

The target line plugin allows you to draw a target line on your chart.

Author:Harry Twyford
Link:chartist-plugin-targetline

Develop a plugin

Plugins are functions that will be called for each chart that is created with the plugin enabled (specified in the plugins configuration of a chart). The plugin function will be called with one argument which is the chart that is registering itself for the plugin. If you wish to use some additional parameters or configuration for your plugin initialization, it's recommended to use a function factory. You can check the example plugin for an implementation using a function factory.

function myChartistPlugin(chart) {

}

From the chart object options, svg (root SVG element) and the eventEmitter can be used to manipulate the behaviour of the chart. It's the responsibility of the plugin to decide if it should be activated on a given chart (i.e. by checking the chart type chart instanceof Chartist.Line etc.).

It's recommended to use the events of Chartist.js (like draw) to manipulate the underlying elements. Using the events, plugins can chain up in a natural way and work independently on extending the functionality of the chart.

Plugins should contain their own default settings and use Chartist.extend to override the settings specified in the options passed to the plugin factory function. Using the optionsProvider of the chart object one could also implement functioanlity based on the chart configuration as well as responsive configuration.

Example Plugin

The following code shows an example plugin that is also available for download and installation. You can also use the repository of the example plugin to start your own awesome Chartist.js plugin.

function ctPointLabels(options) {
  return function ctPointLabels(chart) {
    var defaultOptions = {
      labelClass: 'ct-label',
      labelOffset: {
        x: 0,
        y: -10
      },
      textAnchor: 'middle'
    };

    options = Chartist.extend({}, defaultOptions, options);

    if(chart instanceof Chartist.Line) {
      chart.on('draw', function(data) {
        if(data.type === 'point') {
          data.group.elem('text', {
            x: data.x + options.labelOffset.x,
            y: data.y + options.labelOffset.y,
            style: 'text-anchor: ' + options.textAnchor
          }, options.labelClass).text(data.value);
        }
      });
    }
  }
}