Chart.js plugins and addons
Pre-installed plugins
QuickChart comes with some Chart.js plugins pre-installed. Use these plugins as you please in your chart config - no need to import anything extra in your code.
Plugin name | Description | Chart.js v2 support? | Chart.js v3/v4 support? |
---|---|---|---|
chartjs-plugin-annotation | Add annotations, lines, and text | ✔️ | ✔️ |
chartjs-plugin-datalabels | Add highly customized data labels | ✔️ | ✔️ |
chartjs-chart-financial | ohlc and candlestick chart types | ✔️ | |
chartjs-chart-sankey | sankey chart type | ✔️ | |
chartjs-chart-box-and-violin-plot | boxPlot , horizontalBoxPlot , violin , and horizontalViolin chart types | ✔️ | |
chartjs-chart-radial-gauge | Adds the radialGauge chart type | ✔️ | |
chartjs-plugin-colorschemes | Lets you choose from predefined color schemes (including well-known schemes from Excel and Tableau) | ✔️ | |
chartjs-plugin-doughnutlabel | Ability to display text in the center of doughnut charts | ✔️ | |
chartjs-plugin-error-bars | Support for error bars on chart | ✔️ | |
chartjs-plugin-piechart-outlabels | Add labels outside your pie graph | ✔️ |
Adding custom plugins
As with any Chart.js chart, it's possible to add custom inline plugins by setting the plugins
attribute in your chart config. Setting a custom plugins
object will override the plugins built into QuickChart.
Example
Here's an example that adds some extra space between a pie chart and its legend. Note that is uses a global Chart
object. Access to this object is restricted to paid plans or self-hosted instances:
{
"type": "pie",
"data": {
"labels": ["Yes", "No", "Maybe"],
"datasets": [{
"backgroundColor": ["#FF3784", "#36A2EB", "#4BC0C0"],
"data": [3, 24, 12]
}]
},
"plugins": [{
"beforeInit": function(chart, options) {
Chart.Legend.prototype.afterFit = function() {
// Add 50 pixels of height below the legend.
this.height = this.height + 50;
};
}
}]
}
It is also possible to add a logo to charts or watermark a chart. For more information, see our Watermark API.