Skip to main content

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 nameDescriptionChart.js v2 support?Chart.js v3/v4 support?
chartjs-plugin-annotationAdd annotations, lines, and text✔️✔️
chartjs-plugin-datalabelsAdd highly customized data labels✔️✔️
chartjs-chart-financialohlc and candlestick chart types✔️
chartjs-chart-sankeysankey chart type✔️
chartjs-chart-box-and-violin-plotboxPlot, horizontalBoxPlot, violin, and horizontalViolin chart types✔️
chartjs-chart-radial-gaugeAdds the radialGauge chart type✔️
chartjs-plugin-colorschemesLets you choose from predefined color schemes (including well-known schemes from Excel and Tableau)✔️
chartjs-plugin-doughnutlabelAbility to display text in the center of doughnut charts✔️
chartjs-plugin-error-barsSupport for error bars on chart✔️
chartjs-plugin-piechart-outlabelsAdd 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.