Chart.js: [FEATURE] Fill Color of Overlap Area

[JueDoe]

I'm using ChartJS V2 to create a chart. Chartjs V2 supports the fill color feature. But I would like to fill overlap area with different color. Please see screenshot below. I have two line. A represents overlap area for two lines.

Example :

I would like to fill with 3 different color for 2 lines. When the Line1 and Line2 overlaps, fill color should be A If Line1 does not overlap Line2, fill color should be B If Line2 does not overlap Line1, fill color should be C

I created a fiddle for this. See Fiddle http://jsfiddle.net/qcs1t9ag/

[simonbrunel]

I may be wrong, but this feature looks really complicated to implement: intersection of 2 - and potentially more - Bézier areas, including gaps. Also, many areas can stack on each other, making the whole thing much more complex (fiddle):

I don't think this feature worth the implementation complexity.

@etimberg, what do you think?

[etimberg]

I agree, this is probably too complex to implement unless we can get something for free from the canvas apis

[JueDoe]

What about this: Calculate all the intersection points of Line A and Line B. And draw a third new line (Line C) based on these intersection points. Use Fill Color for Line C. Is this still complex to calculate all intersection points of 2 lines?

[simonbrunel]

Said like that, it sounds easy :) I'm not a specialist of Bézier curves, but I'm pretty sure it's not as trivial as you said. But also, we need to consider that curves could have holes and the filling area is not only between the scale origin and the curve (it could be between two curves). In your fiddle, you use v2.1, but as of v2.7, the filling feature is way more flexible (docs & example) and if we implement the feature you suggested, it needs to work in all cases.

@etimberg good point, we could try to use the canvas API to clip one area with another and draw the resulting shape in a different color.

[kurkle]

This is almost possible in master: https://jsfiddle.net/zg2w5s0a/

[lobermann]

@kurkle do you know when this will be available in a release?

[etimberg]

A v3.0.0-alpha version was released but we aren't at a beta yet. An updated fiddle based on the dist file name change https://jsfiddle.net/cbr9sqtd/

[kurkle]

Closing as resolved (but not yet released)

[CD-UNCC]

Is this going to work with a logarithmic x axis at release? I don't believe it does at the moment: https://jsfiddle.net/Lgw5xsrj/2/
Remove log from the x scales and the fill works.

[kurkle]

@CD-UNCC Its not the scale, but the data: https://jsfiddle.net/0ph8n6j2/

[CD-UNCC]

@kurkle I see, the data must be sorted. How about the undefined datapoints when the axis is 0?

[kurkle]

@kurkle I see, the data must be sorted. How about the undefined datapoints when the axis is 0?

I'm not sure I understand the question. But if you are asking why zero is undefined on a log scale: "The logarithm of zero is not defined -- its mathematically impossible to plot zero on a log scale"