Chart.js: Multi-colored line chart

[gmauriello]

Hi, I started to use Chart.js last week but I have an issue:
Is it possible to draw a chart with different-colored segments ?
Thanks !

[etimberg]

This is possible, but you will need to build a CanvasGradient as the line colour. The BBC wrote a plugin to do this in the y direction that you could use as inspiration https://github.com/bbc/Chart.Bands.js/

[gmauriello]

Thanks, but it seems to work only under/over a specified threshold. Is it possible to get this effect from one point to another ? :)

[etimberg]

Yup, but you'll need to write the logic yourself. In pseudo code it looks like

get pixel for first point
get pixel for second point
Create gradient with chart width
Add gradient stop at point 1
Add gradient stop at point 2
Set gradient as line colour

[etimberg]

I think code that did this would work

var pixel1 = xaxis.getPixelForValue(undefined, 1 /* index */);
var pixel2 = xaxis.getPixelForValue(undefined, 2);

var left = chart.chartArea.left;
var right = chart.chartArea.right;
var width = right - left;
var gradient = ctx.createLinearGradient(left, 0, right, 0);

gradient.addColorStop(pixel1/width, "blue"); // the normal colour of the line
gradient.addColorStop(pixel1/width, "red"); // start highlighting at pixel1
gradient.addColorStop(pixel2/width, "red"); // end red at second pixel
gradient.addColorStop(pixel2/width, "blue");

chart.data.datasets[0].borderColor = gradient;
chart.update();

[gmauriello]

Thank you @etimberg, That's what I was looking for !!
Thanks a lot !!!! 👍 :1st_place_medal:

[abelkbil]

@etimberg Thanks Can i use in on real-time data point pushed with color. If i write a plugin to push x, y along with other param something similar to [ 1.255, 10 [linecolor : #fafafa] ]

[CJEdgerton]

I know this is an old, closed issue, but I thought I would add in case someone has the same use case.

I had a line chart providing a 12 month view of sales where I was requested for the line color to change based what year the month was in. After a lot of searching and tinker with this, I found a simple but not obvious approach. I created a second dataset for the next year and added null values to the indexes from the previous year. In the previous year's data set, I added null values to the months after January from the next year. Leaving January in allows the line to connect.

Here is a fiddle to demonstrate: https://jsfiddle.net/cjedgerton/sqgft5n4/