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'
})
]
});
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);
}
});
}
}
}