Conditional area color?

• March 9, 2018 at 3:18 am #19868
  
  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?

  March 9, 2018 at 10:06 am #19873
  
  Indranil

  @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

  March 10, 2018 at 1:20 pm #19886
  
  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 6 years, 8 months ago by netpresent.
  March 12, 2018 at 12:03 pm #19894
  
  Indranil

  @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

  March 15, 2018 at 1:30 am #19923
  
  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

  March 15, 2018 at 10:07 am #19924
  
  Indranil

  @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