A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/kurkle/chartjs-plugin-gradient below:

kurkle/chartjs-plugin-gradient: Easy gradients for Chart.js

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.

NPM:

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

CDN:

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

ESM

import gradient from 'chartjs-plugin-gradient';

CDN

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

All charts

Chart.register(gradient);

Signle chart

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

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'
          }
        }
      }
    }]
  }
});

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


RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4