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	✔️

QuickChart also includes chartjs-chart-funnel for funnel charts with Chart.js v3 and v4, and chartjs-gauge for gauge charts with v2. Time axes use Moment.js with v2 and the Luxon adapter with v3 and v4.

Set the Chart.js version in your request to match the plugins you use.

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. Use an array of plugin objects. These run alongside the built-in plugins; configure a built-in plugin under options.plugins.

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 it 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.