Chart.js: v2 Line chart with individual point colors?

[djoos]

Hi there,

I'm wondering whether it is possible to have points on a line chart with each a different color (background/border).

Not sure whether this would be something that could be done via a dataset's metaDataset?
It's possible to grab a particular point's color in the metaDataset via chart.data.datasets[0].metaDataset._points[0]._view.backgroundColor, but how would I be able to specify each point's individual color? (preferrably upon instantiation of the chart already)

Thanks in advance for your feedback!

Kind regards,
David

[etimberg]

@djoos this is possible.

The easiest way to do so would be to set the backgroundColor property of the dataset as an array

datasets: [{
    backgroundColor: ['red', 'green', 'blue'], // first point is red, second is green. third point is blue. Any points after the 3rd are also blue
}]

[djoos]

Hi @etimberg,

thanks for your quick reply!

I should have mentioned I gave this a go already... This looks like the perfect solution, however that doesn't seem to work though: is this broken in Chart.js 2.0-dev?

Quick example:

var data = {
    labels: ['x1', 'x2', 'x3', 'x4'],
    datasets: [
        {
            data: [0, 1, 2, 3],
            backgroundColor: ['red', 'green', 'blue', 'yellow']
        }
    ]
};

var chart = new Chart(ctx, {
    type: 'line',
    data: data
});

...just gives me a chart with 4 gray points.

Thanks in advance for your feedback!

Kind regards,
David

[etimberg]

@djoos sorry, i used the wrong property. For points, its pointBackgroundColor

[djoos]

No worries!

:+1:

...I hadn't tried that one yet: it works perfectly, thanks for your help!

[byteme001]

Hello,
my charts have hundreds of data points, is there a way to simply assign a different color to, lets say the 150th data point, instead of having to write green 149 times and then red?
thanks

[nagix]

@byteme001 You can assign red to the 150th data point using custom properties.

chart.getDatasetMeta(0).data[149].custom = {
    backgroundColor: 'red'
};
chart.update();

[byteme001]

Hello nagix, thank you for your response. Could you tell me which chartjs version that code works on? It doesn't work on v2.7.3

try{
    myChart.getDatasetMeta(0).data[150].custom = {pointBorderColor: 'red'};
    myChart.getDatasetMeta(0).data[150].custom = {pointBackgroundColor: 'red'};
    myChart.update();
}catch(e){alert(e);}

thank you, much appreciated.

[nagix]

It works with v2.7.3. Try borderColor and backgroundColor instead of pointBorderColor and pointBackgroundColor.

myChart.getDatasetMeta(0).data[150].custom = {borderColor: 'red'};
myChart.getDatasetMeta(0).data[150].custom = {backgroundColor: 'red'};
myChart.update();

[byteme001]

Thank you so much, you are correct.

[sheixt]

It works with v2.7.3. Try borderColor and backgroundColor instead of pointBorderColor and pointBackgroundColor.

myChart.getDatasetMeta(0).data[150].custom = {borderColor: 'red'};
myChart.getDatasetMeta(0).data[150].custom = {backgroundColor: 'red'};
myChart.update();

@nagix is the .custom setting only apply to the point itself? My expectation was this would set both the point and the line color (i.e. between two points), but on my test, it only seems to amend the point itself, not the line between the point and the next.

If it helps, below is the plugin I have written:

import { Chart } from "react-chartjs-2";

class variableLineColorUtils {
  selectColor(value, thresholds, colors) {
    let color = colors[0];
    thresholds.every((limit, index) => {
      if (value < limit) return false;
      else color = colors[index];
      return true;
    });

    return color;
  }
}

const variableLineColor = {
  id: "variableLineColor",
  afterDraw: (chart, easing) => {
    const options = chart.options.variableLineColor;
    if (options) {
      const utils = new variableLineColorUtils();
      const datasets = chart.config.data.datasets;

      datasets.forEach((set, i) => {
        const points = chart.getDatasetMeta(i).data;
        points.forEach((point, index) => {
          const color = utils.selectColor(
            datasets[i].data[point._index],
            options.thresholds,
            options.colors
          );

          point.custom = { borderColor: color, backgroundColor: color };
        });
        chart.update();
      });
    }
  }
};

Chart.pluginService.register(variableLineColor);

export default variableLineColor;

And these are the options used for the plugin:

variableLineColor: {
  thresholds: [0, 115, 125],
  colors: ["green", "yellow", "red"]
}

If .custom only applies to the point itself, how should apply a change to the color of the line between two points?