Column chart crossing point

• October 27, 2025 at 9:21 am #61565
  
  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.

  

  October 27, 2025 at 4:36 pm #61572
  
  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

  October 27, 2025 at 8:22 pm #61576
  
  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.