https://github.com/kurkle/chartjs-plugin-gradient

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

Last synced: 3 months ago
JSON representation

Easy gradients for Chart.js

• Host: GitHub
• URL: https://github.com/kurkle/chartjs-plugin-gradient
• Owner: kurkle
• License: mit
• Created: 2020-06-10T19:14:28.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2023-05-16T18:23:36.000Z (about 1 year ago)
• Last Synced: 2024-02-15T01:42:51.248Z (4 months ago)
• Language: JavaScript
• Size: 2.39 MB
• Stars: 28
• Watchers: 3
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome - gradient

README

        
# chartjs-plugin-gradient

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-plugin-gradient&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-plugin-gradient)

*Easy gradients for [Chart.js](https://www.chartjs.org)*

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

![Example chart](https://github.com/kurkle/chartjs-plugin-gradient/raw/main/sample.png "Example chart")

## Installation

NPM:

```bash

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

```

CDN:

```html

```

## Usage

### loading

ESM

```js

import gradient from 'chartjs-plugin-gradient';

```

CDN

```js

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

```

### Registering

All charts

```js

Chart.register(gradient);

```

Signle chart

```js

const chart = new Chart(ctx, {

  // ...

  plugins: {

    gradient

  }

});

```

### Configuration

The gradient colors are configured in the `gradient` key of dataset

```js

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](https://github.com/kurkle/chartjs-plugin-gradient/blob/main/LICENSE).