Conditional area color?

[netpresent]

I have a spline area chart that has the y value 0 in the middle of the y axis. I want to show a red area for negative values and a green area for positive values. How do I do this?

[Indranil Deo]

@netpresent,

you can have different color for each region by setting the color property color: 'rgb(90, 220, 0)' for individual dataSeries and splitting the dataSeries based on positive or negative. Please take a look at this JSFiddle.

___________
Indranil Deo
Team CanvasJS

[netpresent]

Thanks for the fast answer! That’s an interesting trick, but a bit clumsy, and the results are unusable in most situations: look at the gaps when the points around the pos/neg flips are not close to zero:

http://jsfiddle.net/pxj4ab9y/

Beats the purpose of a spline. I have many situations where just 1 or 2 data points are below zero (and the x axis has dates), so I cannot just invent some x values with y=0 around those points.

I think a commercial product like CanvasJS should have a built-in solution for a trivial use case like this.

• This reply was modified 3 years, 1 month ago by netpresent.

[Indranil Deo]

@netpresent,

You can introduce extra dataPoints at the beginning and at the end of the dataSeries with y-value 0 and x-value between the last dataPoint of previous dataSeries and first dataPoint of the next dataSeries.

Please take a look at this updated JSFiddle.

___________
Indranil Deo,
Team CanvasJS

[netpresent]

Not really. I cannot invent A new date between two adjacent dates can I? And even if I could, it would be even more clumsy. Should be an standard feature I think. Is it easier if I use bars instead of splines?

Cheers,
JH

[Indranil Deo]

@netpresent,

Yes, column/bar chart should work fine without introducing new dataPoint in this scenario. However, you need to set dataPoint color based on its value, whether negative or positive as shown in the below code snippet –

function setColor(chart){
	for(var i = 0; i < chart.options.data.length; i++) {
  	dataSeries = chart.options.data[i];
  	for(var j = 0; j < dataSeries.dataPoints.length; j++){
    	if(dataSeries.dataPoints[j].y <= 0)
      	dataSeries.dataPoints[j].color = 'rgb(170, 0, 0)';
    }
  }
}

Please take a look at this JSFiddle for a working example.

___________
Indranil Deo
Team CanvasJS