Home forums Using CanvasJS Reverse the Y axis Reply To: Reverse the Y axis

#23388

Vishwas R
Keymaster

@adjmpw,

dataSeries are attached to either primary Y-axis (axisY) or secondary Y-axis (axisY2) by setting axisYType to “primary” or “secondary” respectively. Setting axisYType to “primary” and “secondary” in corresponding dataSeries should work fine in your case. Please find the updated code below:

axisX: {
	gridColor: "white",
	labelFontSize: 5,
	margin: 0,
	titleFontSize: 0,
	gridThickness: 0,
	tickLength: 0,
	lineThickness: 0,
	labelFormatter: function() {
		return " ";
	}
},
axisY: [{
	lineThickness: 0,
	tickLength: 0,

	labelFontSize: 12,
	labelFontColor: "#ccc",
	margin: 0,
	titleFontSize: 0,
	title: "Volume",
	gridColor: "white",
	includeZero: false,
}, {
	lineThickness: 0,
	tickLength: 0,
	title: "ginterest",
	labelFontSize: 12,
	labelFontColor: "#ccc",
	margin: 0,
	titleFontSize: 0,
	title: "oi",
	gridColor: "white",
	includeZero: false,
}

],
axisY2: [{
	lineThickness: 0,
	tickLength: 0,
	labelFontSize: 12,
	margin: 0,
	titleFontSize: 0,
	title: "price",
	gridColor: "white",
	includeZero: true,
}
],
data: [{
	lineThickness: 2,
	type: "scatter",
	name: "depth",
	axisYIndex: 0,
	axisYType: "secondary", //secondary y-axis will be shown towards left
	dataPoints: gdepth[id],
	markerSize: 4,
}, {
	markerSize: 0,
	lineThickness: 2,
	name: "price",
	type: "line",
	color: "black",
	axisYIndex: 2,
	dataPoints: gprice[id],
}, {
	fillOpacity: 0.1,
	markerSize: 0,
	lineThickness: 1,
	axisYType: "primary", //primary y-axis will be shown towards left
	name: "volume",
	type: "column",
	color: "black",
	dataPoints: gvolume[id],
}]

If you are still facing any issue, kindly create JSFiddle reproducing the issue you are facing so that we can look in to it and help you out.


Vishwas R
Team CanvasJS