Automatic color generation for Chart.js

Jukka Kurkela

Last update: Dec 17, 2022

Overview

chartjs-plugin-autocolors

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.

Example

Installation

NPM:

npm i --save-dev chartjs-plugin-autocolors

CDN:

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

Usage

loading

ESM

import autocolors from 'chartjs-plugin-autocolors';

CDN

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

Registering

All charts

Chart.register(autocolors);

Single chart

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

Disabling (when registered for all charts)

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

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

Mode

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

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.

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

Customize

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

Browser compatibility

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

License

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

Comments

Colours are not calculated from the 0 when using .update()

There is an issue where if .update() is called on the chart to update datasets, the colours are not recalculated from offset=0. instead the colours begin to look more an more similar the more time .update() is called in the chart without a page reload. The prefered behaviour in this case should probably be to reset offset when .update() is called.
bug

opened by Waghabond 13

Doesn't work when globally registered for Pie Charts

We have been using this plugin (love it!), but it doesn't seem to work for a pie chart even though it's globally registered. Here's a snippet of my code:

<html>
<head>
  <title>Pulp Telemetry (None)</title>
  <meta name="revision" content="2ae29ef58f560622ac9b868c7e779541b63b4130"/>
  <script src="[https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js](view-source:https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js)" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="[https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js](view-source:https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js)"></script>
  <script src="[https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors](view-source:https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors)"></script>
</head>
<style>

.wrapper{
  height: 600px;
  width: 800px;
}

</style>
<body>
<div class="wrapper">
  <canvas id="postgresql-version"></canvas>
</div>

<script>

// Add autocolor support
const autocolors = window['chartjs-plugin-autocolors'];
Chart.register(autocolors);

// Postgresql Version Chart
const postgresql_version_element = document.getElementById("postgresql-version");
const postgresql_version_chart = new Chart(postgresql_version_element, {
    type: 'pie',
    data: {
        datasets: [{
            label: "Colors",
            data: [1, 1, 3, 6, 4, 7, 9, 3, 6],
            backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]
        }],
        labels: ['13.7', 'None', '15.1', '14.6', '12.13', '11.18', '9.6.24', '9.3.25', '9.2.24']
    },
    options: {
        plugins: {
            title: {
                display: true,
              text: "Postgresql Versions"
            }
        },
    }
});

</script>

</body>
</html>

I had to specify backgroundColor otherwise the whole thing comes out Red. What's up with that?

opened by bmbouter 5

Save the generator for the next updates of the same chart

Hi!

I have met an issue with a dynamic chart use case. When a new dataset is added after the first initialization of the chart the plugin always creates a new generator which will restart the set of colors.

The following html code is a sample to reproduce the issue, you can see that the new lines added dynamically to the graph always get the initial red color :

<!DOCTYPE html>
<html>
<head>
	<script type='text/javascript' src='//cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js'></script>
	<script type='text/javascript' src='//cdn.jsdelivr.net/npm/[email protected]/moment.min.js'></script>
	<script type='text/javascript' src='//cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-moment.min.js'></script>
	<script type='text/javascript' src='//cdn.jsdelivr.net/npm/chartjs-plugin-autocolors'></script>
</head>
<body>
	<div style='width:100%; height:100%'>
        <canvas id='MyChart'>Your browser does not support the HTML5 canvas tag.</canvas>
    </div>

    <script>
        const ctx = document.getElementById('MyChart').getContext('2d');

        function rand() {
            return Math.random() * 100;
        }

        let now = Date.now();
		const datasets = [
            {label: 'Curve 1', data: [{x: now, y: rand()}]},
            {label: 'Curve 2', data: [{x: now, y: rand()}]}
        ];
		const chart = new Chart(ctx, {
			type: 'line',
			data: {
				datasets
			},
			options: {
				animation: false,
				scales: {
					x: {
						type: 'time',
						position: 'bottom'
					}
				}
			},
			plugins: [window['chartjs-plugin-autocolors']]
		});

		// Every second
        let i = 0;
        setInterval(() => {
            if (++i > 60) {
                return; // after 1min no more points
            }

            now = Date.now();
            // Every 5s add a new curve
            if (!(i % 5)) {
                datasets.push({data: [{x: now, y: rand()}], label: 'Curve ' + (datasets.length + 1)});
            }
            // Add a new point for every curve
            for (let dataset of datasets) {
                dataset.data.push({x: now, y: dataset.data[0].y});
            }
            chart.update();
        }, 1000);
    </script>
</body>
</html>

It will look like this : immagine

To avoid this behavior I propose to simply save the generator on the chart instance, let met know your thoughts.

Regards

enhancement

opened by thomasjammet 4

given colors as option?
Hello,

thank you for your plugin! this is my only chance I found to get colors into chartjs since v3.

before I was using colorschemes because you could choose which direction of colors you want. But I don´t understand their code and never got it working in v3.

Do you thing about enhancing your app so serve as a basis to also inject a predefined set of colors into the chart as an additional option? what do you think?

plugins: { autocolors: { colors: ["#767f8b", "#b3b7b8", "#5c6068", "#d3d3d3", "#989ca3"] } }
enhancement
opened by Rello 4
Feature request: add a mode for creating color by dataset 'label'.
Thank you for your work on autocolors. It would be nice if autocolors was able to use the same color when a dataset label / legend is encountered multiple times. One use-case for this is for combined graphs (bars + lines) on the same chart.

An example of datasets that could use this feature is bellow. Autocolors creates 3 colors for this example, although the chart would be better suited with 2 colors based on the dataset labels.

datasets = [ { 'label': 'seller name', 'type': 'bar', 'data': [ 'material': 20, 'other-material': 3 ] 'xAxisID': 'by-name', 'yAxisID': 'total', 'stack': 'by-name', }, { 'label': 'other seller name', 'type': 'bar', 'data': [ 'material': 20, 'other-material': 3 ] 'xAxisID': 'by-name', 'yAxisID': 'total', 'stack': 'by-name', }, { 'label': 'seller name', 'type': 'line', 'data': [ '2022-01': 15, '2022-02': 5 ] 'xAxisID': 'by-month', 'yAxisID': 'orders', 'stack': 'by-month', }, ]
enhancement
opened by landure 3

Doesnt work in 3.9.1 with dataset

As explained here https://stackoverflow.com/questions/74618957/chartjs-autocolors-not-working-as-expected-with-dataset

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

var options = {
  type: 'line',
  data: {
    labels: ["0", "1", "2", "3", "4", "5"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3]
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7]
      },
      {
        label: '# of People',
        data: [3, 1, 15, 4, 9, 12]
      }
    ]
  },
  options: {
    plugins: {
      autocolors: {
         mode: 'dataset'
      }
    }
  }
}


var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);


<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
</body>

opened by jinyeng 2

Alternative Use to Generate Color Array of Desired Length?

Thank you for your plugin. I'd like to extend its use for another area of my project where I need an array of colors of a given length. Is this something I could generate from your existing plugin? Thank you.

opened by GermanPearls 2
Bump terser from 5.14.1 to 5.14.2
Bumps terser from 5.14.1 to 5.14.2.

Changelog

Sourced from terser's changelog.

v5.14.2

Security fix for RegExps that should not be evaluated (regexp DDOS)

Source maps improvements (#1211)

Performance improvements in long property access evaluation (#1213)

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Why `--save-dev`?

This in the README confused me: https://github.com/kurkle/chartjs-plugin-autocolors/blob/4a19c43a44c844b85c8e648db1229b114b64c122/README.md?plain=1#L20

Wouldn't you need the package in production, not just development?
documentation

opened by ChocolateLoverRaj 1
Bump path-parse from 1.0.6 to 1.0.7
Bumps path-parse from 1.0.6 to 1.0.7.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1
Bump glob-parent from 5.1.1 to 5.1.2
Bumps glob-parent from 5.1.1 to 5.1.2.

Release notes

Sourced from glob-parent's releases.

v5.1.2

Bug Fixes

eliminate ReDoS (#36) (f923116)

Changelog

Sourced from glob-parent's changelog.

5.1.2 (2021-03-06)

Bug Fixes

eliminate ReDoS (#36) (f923116)

6.0.0 (2021-05-03)

⚠ BREAKING CHANGES

Correct mishandled escaped path separators (#34)

upgrade scaffold, dropping node <10 support

Bug Fixes

Correct mishandled escaped path separators (#34) (32f6d52), closes #32

Miscellaneous Chores

upgrade scaffold, dropping node <10 support (e83d0c5)

Commits

eb2c439 chore: update changelog

12bcb6c chore: release 5.1.2

f923116 fix: eliminate ReDoS (#36)

0b014a7 chore: add JSDoc returns information (#33)

2b24ebd chore: generate initial changelog

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 1

Releases(v0.2.1)

v0.2.1(Jan 6, 2023)
Changes

2de0381: fix: chart.js peer dependency version

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.2.0...v0.2.1
Source code(tar.gz)
Source code(zip)
v0.2.0(Dec 24, 2022)
feat: add label mode (35d94e4c4c704b5ca7aeaea009e94c6b3506e4b1)

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.1.0...v0.2.0
Source code(tar.gz)
Source code(zip)
v0.1.0(Dec 12, 2022)

Notable changes

6a34c0b - fix: update when datasets are replaced (Jukka Kurkela) [issue #20] b8bf4dc - test: add tests (Jukka Kurkela) 43f1b6d - feat: add types (Jukka Kurkela) [issue #21] ccf5449 - fix: support node/cjs (Jukka Kurkela)

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.0.9...v0.1.0
Source code(tar.gz)
Source code(zip)
v0.0.9(Dec 8, 2022)

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.0.8...v0.0.9
Source code(tar.gz)
Source code(zip)
v0.0.8(Dec 8, 2022)

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.0.7...v0.0.8
Source code(tar.gz)
Source code(zip)
v0.0.7(Oct 7, 2022)
What's Changed

Save the generator for the next updates of the same chart by @thomasjammet in https://github.com/kurkle/chartjs-plugin-autocolors/pull/16

New Contributors

@thomasjammet made their first contribution in https://github.com/kurkle/chartjs-plugin-autocolors/pull/16

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.0.6...v0.0.7
Source code(tar.gz)
Source code(zip)
v0.0.6(Jun 17, 2022)
What's Changed

Add offset option

Fix sonar issues from samples by @kurkle in https://github.com/kurkle/chartjs-plugin-autocolors/pull/11

Update README.md by @Diff-fusion in https://github.com/kurkle/chartjs-plugin-autocolors/pull/12

New Contributors

@Diff-fusion made their first contribution in https://github.com/kurkle/chartjs-plugin-autocolors/pull/12

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.0.5...v0.0.6
Source code(tar.gz)
Source code(zip)
v0.0.5(Dec 28, 2021)
What's Changed

Bump glob-parent from 5.1.1 to 5.1.2 by @dependabot in https://github.com/kurkle/chartjs-plugin-autocolors/pull/7

Bump path-parse from 1.0.6 to 1.0.7 by @dependabot in https://github.com/kurkle/chartjs-plugin-autocolors/pull/8

Fix Typo in package.json by @matitalatina in https://github.com/kurkle/chartjs-plugin-autocolors/pull/9

Bump version to 0.0.5, update deps by @kurkle in https://github.com/kurkle/chartjs-plugin-autocolors/pull/10

New Contributors

@matitalatina made their first contribution in https://github.com/kurkle/chartjs-plugin-autocolors/pull/9

@kurkle made their first contribution in https://github.com/kurkle/chartjs-plugin-autocolors/pull/10

Full Changelog: https://github.com/kurkle/chartjs-plugin-autocolors/compare/v0.04...v0.0.5
Source code(tar.gz)
Source code(zip)
v0.04(Sep 7, 2021)
Changes

Fix beforeUpdate params (#6)

Source code(tar.gz)
Source code(zip)
v0.0.3(Nov 15, 2020)
Changes

Preserve colors defined in datasets

Add customize option for generated color customization.

Source code(tar.gz)
Source code(zip)
v0.0.2(Jun 9, 2020)
Changes

Reduce files in package

Source code(tar.gz)
Source code(zip)
v0.0.1(Jun 9, 2020)

First release
Source code(tar.gz)
Source code(zip)

Owner

Jukka Kurkela

Programmer of various languages and architectures since 1980's

GitHub

Automatic chart generator from user input using CharGPT.

Chart GPT A platorm for generate chart with ChatGPT ??️ ChatGPT Generator is under development. Features Light/dark mode toggle Live previews Fullscre

6 May 5, 2023

Predefined color schemes for Chart.js

chartjs-plugin-colorschemes Predefined color schemes for Chart.js You can pick the perfect color combination for your charts from the predefined color

247 Dec 13, 2022

A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

177 Jan 4, 2023

Chart.js plugin to defer initial chart updates

Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart a

97 Nov 9, 2022

Bar Funnel Chart extension for Chart.js

Chart.BarFunnel.js Provides a Bar Funnel Chart for use with Chart.js Documentation To create a Bar Funnel Chart, include Chart.BarFunnel.js after Char

58 Nov 24, 2022

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies; use it with any framework or backend.

24 Dec 12, 2022

Barcode generation library written in JavaScript that works in both the browser and on Node.js

Introduction JsBarcode is a barcode generator written in JavaScript. It supports multiple barcode formats and works in browsers and with Node.js. It h

4.7k Dec 30, 2022

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

Color Thief Grab the color palette from an image using just Javascript.Works in the browser and in Node. View the demo page for examples, API docs, an

11.2k Dec 30, 2022

An HTML5/Canvas implementation of 8-bit color cycling

Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co

8 Dec 1, 2022

Redefined chart library built with React and D3

Recharts Introduction Recharts is a Redefined chart library built with React and D3. The main purpose of this library is to help you to write charts i

19.4k Jan 2, 2023

:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

9.2k Jan 2, 2023

GPL version of Javascript Gantt Chart

dhtmlxGantt Getting started | Features | Follow us | License | Useful links dhtmlxGantt is an open source JavaScript Gantt chart that helps you illust

952 Dec 29, 2022

🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

5.2k Jan 2, 2023

:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

5.4k Jan 1, 2023

:bar_chart: A library of modular chart components built on D3

Plottable Plottable is a library of chart components for creating flexible, custom charts for websites. It is built on top of D3.js and provides highe

2.9k Dec 31, 2022

Chart image and QR code web API

QuickChart QuickChart is a service that generates images of charts from a URL. Because these charts are simple images, they are very easy to embed in

1.3k Dec 25, 2022

📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

7.5k Jan 7, 2023

TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

4 Mar 3, 2021

🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

5.2k Jan 6, 2023

Automatic color generation for Chart.js

Related tags

Overview

chartjs-plugin-autocolors

Example

Installation

Usage

loading

Registering

Disabling (when registered for all charts)

Mode

Customize

Browser compatibility

License

Comments

v5.14.2

v5.1.2

Bug Fixes

5.1.2 (2021-03-06)

Bug Fixes

6.0.0 (2021-05-03)

⚠ BREAKING CHANGES

Bug Fixes

Miscellaneous Chores

Releases(v0.2.1)

v0.2.1(Jan 6, 2023)

Changes

v0.2.0(Dec 24, 2022)

v0.1.0(Dec 12, 2022)

Notable changes

v0.0.9(Dec 8, 2022)

v0.0.8(Dec 8, 2022)

v0.0.7(Oct 7, 2022)

What's Changed

New Contributors

v0.0.6(Jun 17, 2022)

What's Changed

New Contributors

v0.0.5(Dec 28, 2021)

What's Changed

New Contributors

v0.04(Sep 7, 2021)

Changes

v0.0.3(Nov 15, 2020)

Changes

v0.0.2(Jun 9, 2020)

Changes

v0.0.1(Jun 9, 2020)

Owner

Jukka Kurkela

Automatic chart generator from user input using CharGPT.

Predefined color schemes for Chart.js

A Simple Dashboard Chart in Laravel Nova using Chart JS

Chart.js plugin to defer initial chart updates

Bar Funnel Chart extension for Chart.js

TradeX-chart is a trade chart written in plain (vanilla) JavaScript with minimal dependencies

Barcode generation library written in JavaScript that works in both the browser and on Node.js

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

An HTML5/Canvas implementation of 8-bit color cycling

Redefined chart library built with React and D3

:bar_chart: A D3-based reusable chart library

GPL version of Javascript Gantt Chart

🍞📊 Beautiful chart for data visualization.

:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

:bar_chart: A library of modular chart components built on D3

Chart image and QR code web API

📈 A small, fast chart for time series, lines, areas, ohlc & bars

TChart.js - simple and configurable Bar and Line Chart library in Javascript

🍞📊 Beautiful chart for data visualization.