chartjs-plugin-gradient

Chart.js v3+, v4+ plugin that renders a dataset's background and/or border color as a gradient following any axis (x, y, or r), instead of a single flat color — for anyone already charting with Chart.js who wants a value-driven color transition instead of a solid fill or stroke. It should also work with Chart.js v2, but there are no regression tests to guarantee this.

Example

Installation

npm install chart.js chartjs-plugin-gradient

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient"></script>

Quickstart

import { Chart, registerables } from 'chart.js';
import gradient from 'chartjs-plugin-gradient';

Chart.register(...registerables, gradient);

new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
    datasets: [
      {
        label: 'Gradient background',
        data: [10, 20, 15, 40, 30, 25, 60, 45, 70, 50],
        fill: true,
        gradient: {
          backgroundColor: {
            axis: 'y',
            colors: {
              0: 'green',
              50: 'blue',
              100: 'red',
            },
          },
        },
      },
    ],
  },
});

Chart.register(gradient) enables the plugin for every chart. To register it for a single chart instead, pass it in plugins:

new Chart(ctx, {
  // ...
  plugins: [gradient],
});

See more integration options (script tag, other module loaders) in the documentation.

Documentation

You can find documentation for chartjs-plugin-gradient at https://chartjs-plugin-gradient.pages.dev/. The full configuration reference lives there, not in this README — this file stays a quickstart.

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> npm run build        // build dist files
> npm test              // run all tests
> npm run lint          // perform code linting

License

chartjs-plugin-gradient is available under the MIT license.