JavaScript Charts & Graphs with Reversed Axis

Download JavaScript Chart Samples

You can Reverse / Invert the order in which the categories or values are plotted along axis i.e. the largest value can be placed near the origin while smallest value being placed away from it. You can invert both X and Y axes. This feature can be useful to show positions in sport events, depth etc. Given example shows depth of an ocean at different levels. It also includes HTML / JavaScript source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title:{
		text: "Depth of Ocean at Different Levels"
	},
	axisY: {
		title: "Depth (in meters)",
		suffix: " m",
		reversed: true
	},
	axisX2: {
		tickThickness: 0,
		labelAngle: 0
	},
	data: [{
		type: "column",
		axisXType: "secondary",
		yValueFormatString: "#,##0 meters",
      	indexLabelFontSize: 16,
		dataPoints: [
			{ y: 300, label: "Continental Shelf" },
			{ y: 3000, label: "Continental Slope" },
			{ y: 4000, label: "Continental Rise" },
			{ y: 6000, label: "Abyssal Plain", indexLabel: "\u2193 Deepest" },
			{ y: 4400, label: "Sea Mount" }
		]
	}]
});
chart.render();

}

Chart Customizations

You can also use logarithmic scale along axis using logarithmic property. You can also format the axis labels using labelFormatter or append something to existing label using suffix. You can also further customize the axis labels using labelFontSize, labelFontColor, prefix etc.