JavaScript Charts & Graphs with Secondary Axis

Download JavaScript Chart Samples

Multiple axes are mostly useful when the values in a chart vary widely from one data series to another. You can plot one or more data series against primary axis while using secondary axis for another. Multiple Axis makes it easier to compare series with different range within the same graph instead of flipping between two charts. The given example includes source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Car Parts Sold in Different States"
	},
	subtitles: [{
		text: "Click Legend to Hide or Unhide Data Series"
	}], 
	axisX: {
		title: "States"
	},
	axisY: {
		title: "Oil Filter - Units",
		titleFontColor: "#4F81BC",
		lineColor: "#4F81BC",
		labelFontColor: "#4F81BC",
		tickColor: "#4F81BC",
		includeZero: true
	},
	axisY2: {
		title: "Clutch - Units",
		titleFontColor: "#C0504E",
		lineColor: "#C0504E",
		labelFontColor: "#C0504E",
		tickColor: "#C0504E",
		includeZero: true
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "column",
		name: "Oil Filter",
		showInLegend: true,      
		yValueFormatString: "#,##0.# Units",
		dataPoints: [
			{ label: "New Jersey",  y: 19034.5 },
			{ label: "Texas", y: 20015 },
			{ label: "Oregon", y: 25342 },
			{ label: "Montana",  y: 20088 },
			{ label: "Massachusetts",  y: 28234 }
		]
	},
	{
		type: "column",
		name: "Clutch",
		axisYType: "secondary",
		showInLegend: true,
		yValueFormatString: "#,##0.# Units",
		dataPoints: [
			{ label: "New Jersey", y: 210.5 },
			{ label: "Texas", y: 135 },
			{ label: "Oregon", y: 425 },
			{ label: "Montana", y: 130 },
			{ label: "Massachusetts", y: 528 }
		]
	}]
});
chart.render();

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	} else {
		e.dataSeries.visible = true;
	}
	e.chart.render();
}

}

Chart Customizations

You can set the type of axis you want to use using axisXType or axisYType. You can also have multiple axes on same side and attach different data series to it using axisXIndex or axisYIndex.