I love the idea behind this project... unfortunately I just tried it and it doesn't work. I followed the directions exactly as described and all of my metrics are all grey colored. There are also no errors.

chart.js version 2.7.3 chartjs-plugin-colorschemes version 0.1.0 installed with npm using react

Hey @nagix , would you accept this commit as a pull request? -> https://github.com/JohnArcher/chartjs-plugin-colorschemes/commit/707ce90516af10e23e7ded3055f75d9c4a4e9f63

The aim is to (dynamically) add additional colors to a scheme in order to e.g. prevent that the same colors are used again when you have more datasets then colors.

An example using my code would be:

var myColorFunction = function () {
    var myColors = ['#ff00000', '#00ff00'];
    // ... or calculate your colors with some fancy algorithm
    return myColors;
}

...
    plugins: {
        colorschemes: {
            scheme: 'brewer.Paired12',
            colorFunction: myColorFunction
        }
    }

I really need this behaviour. :-) What do you think?

Hello there! I need to be honest with you, I have not tested this code at all, but this is essentially what came out of my attempts to get the plugin working again. So, it may only bring back rudimentary compatibility.

I have used code from someone else as you can see. ~I need to get in touch to confirm that this is okay.~ I have just received confirmation that this is not an issue.

Fixes #24 Fixes #25

I have a stacked series of bars. I would like to force the colors of the upper bar in the stack to be a ligher/less saturated hue than the lower color. Is this possible to do?

The default looks like this using brewer.Paired12.

I want to make the pink bar a lighter blue to match the bar below it, the red bar a light blue to match the dark blue below it, and so on.

Is it possible to reference the color in a series and adjust the saturation?

First I just want to say that this is a fantastic idea and I'm really happy you developed the package. Pretty crazy that something like this isn't included by default in chartJS. I am unfortunately having some trouble getting it working within my application though.

I am loading your package via jsdelivr CDN, and using it along with chartJS within a basic jQuery document ready function. I am not a JS expert so I guess I could be setting something up wrong here, but it's not apparent to me what it is. My code seems to match your examples, at least for setting up the config parameter.

Here is what my chart currently looks like:

Here is my loading of your package & chart js in my base html file:

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/[email protected]"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"
    ></script>

And here is my .js file containing the chartJS and your package code. Note that this file is called at the very end of the body of my base HTML file.

$(function() {
  /// code goes here that sets up data variables below (cacc, rsvc, models)
  /// not posted to keep post short

  let ctx = document.getElementById("stacked_chartjs");
  let chart = new Chart(ctx, {
    type: "line",
    data: {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August"
      ],
      datasets: [
        {
          label: "Corporate Access",
          data: cacc
        },
        {
          label: "Research Services",
          data: rsvc
        },
        {
          label: "Models & Content",
          data: models
        }
      ]
    },
    options: {
      plugins: {
        colorschemes: {
          scheme: "brewer.Paired12"
        }
      },
      maintainAspectRatio: true,
      responsive: true,
      tooltips: {
        mode: "index",
        intersect: false
      },
      hover: {
        mode: "index"
      },
      scales: {
        xAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: "Month"
            }
          }
        ],
        yAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: true,
              labelString: "Consumpion"
            }
          }
        ]
      }
    }
  });
});

You can add a new option called custom which should be a function that receives a clone of the configured scheme and has to return an array of colors. If no or an empty array is returned the original scheme is used.

@nagix this is my option in data

options:{
	plugins : {
		colorschemes : {
			scheme : 'brewer.YlGn3'
		}
	}
}

by default brewer.Paired12 is applied even I change other schemes

Modularizing the color schema(s) will greatly reduce the user payload.

i.e: Instead of:

import 'chartjs-plugin-colorschemes';  // This loads everything at 50K!

Use:

import { OfficeAspect6 } from 'chartjs-plugin-colorschemes';  // Only loads what's needed = 75 bytes!!

Nice plugin. It seems to work well for the POINTS on my scatter charts, but the lines between the points are left as the default gray color that comes with chartjs.

How can I fix this problem?

I triend to install this package with ng2-charts v3.0.8 and chart.js v3.6.0 but I get a dependency error:

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: **[email protected] npm ERR! Found: [email protected] npm ERR! node_modules/chart.js npm ERR! chart.js@"3.6.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer chart.js@">= 2.5.0 < 3" from [email protected] npm ERR! node_modules/chartjs-plugin-colorschemes npm ERR! chartjs-plugin-colorschemes@"" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Does it say it still requires chart.js version to be lower than 3?

Please add support for Chartjs 3.x.x or at least mention it in the README since it only says "This plugin requires Chart.js 2.5.0 or later."

Chart.js changed from Chart.defaults.global to Chart.defaults in the new version.

https://www.chartjs.org/docs/master/getting-started/v3-migration/#defaults

Just included the js file in html page and havent added colorschemes to plugins yet. Still getting error. https://stackoverflow.com/questions/74630153/chartjs-3-9-1-and-colorscheme-not-working

Hi Team,

I am using vanilla .NET MVC website (have razor cshtml view file) where I have got both chart.js and chartjs-plugin-colorschemes installed (installed via LibMan client side library). Having followed instructions, I am receiving the following message on console (F12 dev tools in browser):

Uncaught TypeError: Cannot read properties of undefined (reading 'plugins') in both .min.js and .js versions.

Inspecting the main JS file the error is here:

Chart.defaults.global.plugins.colorschemes = {
	scheme: 'brewer.Paired12',
	fillAlpha: 0.5,
	reverse: false,
	override: false
};

Additionally, I tried the NPM runkit option: https://npm.runkit.com/chartjs-plugin-colorschemes and it returns the same error.

My Razor Page:

<div class="row">
        <div class="col-lg-4">
            <canvas id="myChart"></canvas>
        </div>
    </div>

<script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [4, 6, 3, 5, 2, 3],               
                borderWidth: 1
            }]
        },
        options: {
            plugins: {
                colorschemes: {
                    scheme: 'brewer.GnBu6'
                }
            }
        }
    });
</script>

My Master / Layout page:

<script src="~/Content/js/ChartJS3.7.1/chart.min.js"></script>
<script src="~/Content/js/ChartJsColorSchemes0.4.0/chartjs-plugin-colorschemes.js"></script>

My Index View: The bar chart renders but without any colours scheme applied.

Perhaps I am not doing something right? Apologies if that is the case.

Hiya,

Next to my chart i'd like to show an overview of the avg,mix/max values of whats in my chart. Would it be possible to grab the colors from the color scheme somehow?

I was wondering if there was any way to create a color scale that would obtain a color based on a certain value. My target is to make this plot have brighter colors for higher absolute values i.e. progressively brighter green for high positive values and the same thing (in red) for high negative values.

Microsoft Excel can create this color scale in the Conditional Formatting section and the result looks like this: