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.

caution

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.

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.