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

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

kurkle/chartjs-plugin-autocolors: Automatic color generation for Chart.js

Automatic color generation for Chart.js

The generation is based on Janus Troelsen's answer at Stack Overflow.

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.

NPM:

npm i --save chartjs-plugin-autocolors

CDN:

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

ESM

import autocolors from 'chartjs-plugin-autocolors';

CDN

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

All charts

Chart.register(autocolors);

Single chart

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

If registered globally, it might be desirable to disable the autocolors for some charts

const chart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      autocolors: {
        enabled: false
      }
    }
  }
});

NOTE: 'dataset' mode does not work properly for Pie / Doughnut charts, so using 'data' mode with those charts is advised.

There are two modes, 'dataset' (default) 'data' and 'label'

• In 'dataset' mode, a new color is picked for each dataset.
• In 'data' mode, an array of colors, equivalent to the length of data is provided for each dataset.
• In 'label' mode, color is picked for each different dataset label.

const chart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      autocolors: {
        mode: 'data'
      }
    }
  }
});

A customize function can be provided to customize the generated colors. The function is expected to return object containing background and border properties, with values acceptable as colors by Chart.js.

const lighten = (color, value) => Chart.helpers.color(color).lighten(value).rgbString();

const chart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      autocolors: {
        customize(context) {
          const colors = context.colors;
          return {
            background: lighten(colors.background, 0.5),
            border: lighten(colors.border, 0.5)
          };
        }
      }
    }
  }
});

offset option can be used to offset the color generation by a number of colors.

const chart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      autocolors: {
        offset: 5
      }
    }
  }
});

Sometimes you might need to color multiple adjacent datasets with same color. The repeat option is for that use case.

const chart = new Chart(ctx, {
  // ...
  options: {
    plugins: {
      autocolors: {
        repeat: 2
      }
    }
  }
});

This plugin uses a generator function, so it is not compatible with Internet Explorer.

chartjs-plugin-autocolors.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