Package Exports

chartjs-plugin-gradient

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chartjs-plugin-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

chartjs-plugin-gradient

Easy gradients for Chart.js

This plugin requires Chart.js 3.0.0 or later. Could work with v2, but it is not supported.

NOTE the plugin does not automatically register.

Example

Example chart

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.