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.


Due to compute restrictions, the Community (free) tier does not support all properties on the Chart or chart objects. Subscribers have unrestricted access to these objects.


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.