Column chart crossing point

[James]

I am trying to replicate a chart we have in jqChart. In a CanvasJS column chart, how can I change the axis crossing point from 0 to -10 as shown in this example below. Basically columns rise up and drop down from -10 rather than 0. Also, the color is different for the columns rising up vs those dropping down.

[Ananya]

@jmedlock,

Could you please share the image again, as the link shared seems to be broken?

Also, the color is different for the columns rising up vs those dropping down.

You can change the color of column using color property of dataPoint as shown in the code snippet below –

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)';
    }
  }
}

Also, please take a look at this JSFiddle which shows setting different colors to positive and negative values.

—
Ananya Deka
Team CanvasJS

[James]

Thanks. I managed to achieve this using a rangeColumn chart as in my case the crossing point is not 0 but -10. I then manually just set the color per bar in the data object based on their value being above or below -10.