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.
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 |
Sketchy Plugin
The sketchy plugin makes your charts look like they have been drawn by hand. This plugin makes use of SVG filters and works on IE10+, Safari 7+ and Android 4.4+. Also note that SVG filters are not very performant and they will eat your users mobile battery quickly for sure.
| Author: | Gion Kunz |
| Link: | chartist-plugin-sketchy |
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);
}
});
}
}
}