jQuery Charts & Graphs with Logarithmic Axis

Download jQuery Chart Samples

A Logarithmic Scale is a nonlinear scale used to plot exponential values. CanvasJS Library supports logarithmic axis in all the chart types that uses axis including area, bar, line, etc. The given examples includes HTML / jQuery 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,
	zoomEnabled: true,
	theme: "dark2",
	title:{
		text: "Business Growth From 2000 to 2017"
	},
	axisX:{
		title: "Year",
		valueFormatString: "####",
		interval: 2
	},
	axisY:{
		logarithmic: true, //change it to false
		title: "Profit in USD (Log)",
		prefix: "$",
		titleFontColor: "#6D78AD",
		lineColor: "#6D78AD",
		gridThickness: 0,
		lineThickness: 1,
		labelFormatter: addSymbols
	},
	axisY2:{
		title: "Profit in USD",
		prefix: "$",
		titleFontColor: "#51CDA0",
		logarithmic: false, //change it to true
		lineColor: "#51CDA0",
		gridThickness: 0,
		lineThickness: 1,
		labelFormatter: addSymbols
	},
	legend:{
		verticalAlign: "top",
		fontSize: 16,
		dockInsidePlotArea: true
	},
	data: [{
		type: "line",
		xValueFormatString: "####",
		yValueFormatString: "$#,##0.##",
		showInLegend: true,
		name: "Log Scale",
		dataPoints: [
			{ x: 2001, y: 8000 },
			{ x: 2002, y: 20000 },
			{ x: 2003, y: 40000 },
			{ x: 2004, y: 60000 },
			{ x: 2005, y: 90000 },
			{ x: 2006, y: 140000 },
			{ x: 2007, y: 200000 },
			{ x: 2008, y: 400000 },
			{ x: 2009, y: 600000 },
			{ x: 2010, y: 800000 },
			{ x: 2011, y: 900000 },
			{ x: 2012, y: 1400000 }, 
			{ x: 2013, y: 2000000 }, 
			{ x: 2014, y: 4000000 }, 
			{ x: 2015, y: 6000000 }, 
			{ x: 2016, y: 8000000 }, 
			{ x: 2017, y: 9000000 }
		]
	},
	{
		type: "line",
		xValueFormatString: "####",
		yValueFormatString: "$#,##0.##",
		axisYType: "secondary",
		showInLegend: true,
		name: "Linear Scale",
		dataPoints: [
			{ x: 2001, y: 8000 },
			{ x: 2002, y: 20000 },
			{ x: 2003, y: 40000 },
			{ x: 2004, y: 60000 },
			{ x: 2005, y: 90000 },
			{ x: 2006, y: 140000 },
			{ x: 2007, y: 200000 },
			{ x: 2008, y: 400000 },
			{ x: 2009, y: 600000 },
			{ x: 2010, y: 800000 },
			{ x: 2011, y: 900000 },
			{ x: 2012, y: 1400000 }, 
			{ x: 2013, y: 2000000 }, 
			{ x: 2014, y: 4000000 }, 
			{ x: 2015, y: 6000000 }, 
			{ x: 2016, y: 8000000 }, 
			{ x: 2017, y: 9000000 }
		]
	}]
});
chart.render();

function addSymbols(e){
	var suffixes = ["", "K", "M", "B"];

	var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
	if(order > suffixes.length - 1)
		order = suffixes.length - 1;

	var suffix = suffixes[order];
	return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
}

}

Chart Customizations

Axis scale can be changed to logarithmic by setting the logarithmic property to true. You can also modify the logarithmBase. Other commonly used customization options are reversed, interval etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial