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.