kurkle/chartjs-plugin-gradient

Easy gradients for Chart.js

chartjs-plugin-gradient

Easy gradients for Chart.js

This plugin requires Chart.js 3.0.0 or later. It should also work with v2, but there are no regressing tests to guarantee this.

NOTE the plugin does not automatically register.

Example

Installation

NPM:

npm i --save-dev chartjs-plugin-gradient

CDN:

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

Usage

loading

ESM

import gradient from 'chartjs-plugin-gradient';

CDN

const gradient = window['chartjs-plugin-gradient'];

Registering

All charts

Chart.register(gradient);

Signle chart

const chart = new Chart(ctx, {
  // ...
  plugins: {
    gradient
  }
});

Configuration

The gradient colors are configured in the gradient key of dataset

const chart = new Chart(ctx, {
  data: {
    datasets: [{
      // data
      gradient: {
        backgroundColor: {
          axis: 'y',
          colors: {
            0: 'red',
            50: 'yellow',
            100: 'green'
          }
        },
        borderColor: {
          axis: 'x',
          colors: {
            0: 'black',
            1: 'white',
            2: 'black',
            3: 'white'
          }
        }
      }
    }]
  }
});

License

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