JavaScript Charts & Graphs with Axis / Scale Breaks

Download JavaScript Chart Samples

Axis / Scale Breaks are used when some data point's values in data series are either extremely high or low. Because of such extremities, it will be difficult to see the differences between smaller values. Axis / Scale Breaks are used to enhance readability in such cases. The Given example shows GDP per Capita of different countries in 2016 using a JavaScript Column Chart with Axis / Scale Break on Axis Y. It also contains 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,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title: {
		text: "GDP per Capita - 2016"
	},
	subtitles: [{
		text: "In USD",
		fontSize: 16
	}],
	axisY: {
		prefix: "$",
		scaleBreaks: {
			customBreaks: [{
				startValue: 10000,
				endValue: 35000
			}]
		}
	},
	data: [{
		type: "column",
		yValueFormatString: "$#,##0.00",
		dataPoints: [
			{ label: "USA", y: 57466.787 },
			{ label: "Australia", y: 49927.82 },
			{ label: "UK", y: 39899.388 },
			{ label: "UAE", y: 37622.207 },
			{ label: "Brazil", y: 8649.948 },
			{ label: "China", y: 8123.181 },
			{ label: "Indonesia", y: 3570.295 },
			{ label: "India", y: 1709.387 }	
		]
	}]
});
chart.render();

}

Chart Customizations

Axis / Scale Breaks are automatically applied if you include the scaleBreaks in axis object. Manual breaks can be added by adding a customBreaks object with startValue & endValue. Other frequently used customization options are collapsibleThreshold, spacing, type, lineColor, etc.