10

I am attempting to create a line chart where the color of the line (and the points) is dependant upon the value being plotted. For example if the value is above the following thresholds [0, 115, 125] then the color would be either ['green', 'yellow', 'red'] respectively.

The requirement is nearly identical to that which is achieved in this example: https://jsfiddle.net/egamegadrive16/zjdwr4fh/

The difference is that I am using react-chart-js-2 and as a result, the draw() method is not accessible in the same way. Instead, it is suggested to create a plugin to manipulate the chart.

This is the plugin code at present:

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"]
}

This approach only amends the color of the points themselves, not the line between the points. The line remains in the chart's default backgroundColor.

How can I amend the color of the line itself?

Sheixt
  • 2,546
  • 12
  • 36
  • 65
  • 1
    Really want to get the bonus but, does this answer your question? https://stackoverflow.com/questions/56429021/how-to-draw-one-line-with-different-colors-in-chartjs2 – keikai Feb 21 '20 at 02:10
  • @keikai: Comments do not receive bounties. Please do make a canonical answer about all concerns to answer section. – mico Feb 21 '20 at 16:24
  • @mico sure I know the guideline, just noticing the duplicated content feels better to be placed here rather than the answer. – keikai Feb 21 '20 at 17:24
  • Really sorry about the lack of response... I was hit with a case of man-flu! As @ mico comment, to allocate a bounty I will need a working answer @keikai if you can provide one, I would be more than happy to allocate the bounty :) – Sheixt Feb 25 '20 at 11:12

5 Answers5

6

You can use the plugins array to create a new beforeRender plugin that will accomplish this.

plugins: [{
  beforeRender: (x, options) => {
    const c = x.chart;
    const dataset = x.data.datasets[0];
    const yScale = x.scales['y-axis-0'];
    const yPos = yScale.getPixelForValue(0);

    const gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
    gradientFill.addColorStop(0, 'rgb(86,188,77)');
    gradientFill.addColorStop(yPos / c.height, 'rgb(86,188,77)');
    gradientFill.addColorStop(yPos / c.height, 'rgb(229,66,66)');
    gradientFill.addColorStop(1, 'rgb(229,66,66)');

    const model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;
    model.borderColor = gradientFill;
  },
}];

The result will look something like this:

enter image description here

This will also work for the background color just by changing the model.borderColor line to model.backgroundColor. For example:

enter image description here

blacktide
  • 10,654
  • 8
  • 33
  • 53
  • Do you have an example of how this works on Chart.js 4.1+? Specifically re-creating this line: `const model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;`. `_meta` was removed from the latest version but they did add `getDatasetMeta()` method, which can get the dataset's meta, but I'm not sure what the second part was trying to do. – zen Jun 16 '23 at 18:34
2

For that, you will have to manipulate your data something as I did check out the below code. I doubt if you can do it with the plugin.

import React from 'react';
import { Line } from 'react-chartjs-2';

const data = {
  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  datasets: [
    {
      label: 'First one',
      fill: false,
      borderColor: 'gray',
      data: [null, null, 2, 0, 3],
    },
    {
      label: 'Second one',
      fill: false,
      borderColor: 'blue',
      data: [2, 4, 2, null, null, null, null, null, null],
    },
    {
      label: 'Third one',
      fill: false,
      borderColor: 'cyan',
      data: [null, null, null, null, 3, 4, 1, null, null],
    },
  ],
}

function App() {
  return (
    <div>
      <Line
        data={data}
      />
    </div>
  );
}



export default App
Reyansh Mishra
  • 1,879
  • 1
  • 14
  • 26
  • 1
    I think you may be right, I've already been working on a solution which follows a similar approach today. I shall allocate you the bounty once I confirm a working solution. – Sheixt Feb 26 '20 at 12:58
  • This will not work if you want one continuous line. There will be a gap between each color. – Hultan Jan 22 '22 at 20:42
0

Use borderColor or color instead of backgroundColor of line.

Ehsan ul haq
  • 107
  • 1
  • 9
0

Try to use borderColor instead of backgroundColor and Please refer ChartJs StackOverflow. It may solve your problem.

Deeksha gupta
  • 659
  • 6
  • 15
0

My solution uses ChartJS version 3's new feature , being able to edit the line in segments you can write a function like this.

segment:{
  borderColor:function(context){
    const yval = context.p1.raw.y
    if (yval>=5){
      return "green"
    } else if(yval<=-5){
      return "red"
    } else{
      return "gray"
    }
  }
},

This code will return green if the value is above 5 and red if below, and gray if it's in between. I believe this is the most simplistic solution since it doesn't require making your own plugin or re-rendering the chart.

Nate Millner
  • 11
  • 1