Responsive JavaScript Charts & Graphs

Download JavaScript Chart Samples

Responsive JavaScript Chart that adjusts to different screen sizes including Tablets, Desktops & Phones. All Graphs are Cross-Browser compatible and have 10X better performance. Given example shows Column Chart that you can resize to check it's responsiveness. It also contains 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,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	title: {
		text: "GDP Growth Rate - 2016"
	},
	axisY: {
		title: "Growth Rate (in %)",
		suffix: "%"
	},
	axisX: {
		title: "Countries"
	},
	data: [{
		type: "column",
		yValueFormatString: "#,##0.0#"%"",
		dataPoints: [
			{ label: "India", y: 7.1 },	
			{ label: "China", y: 6.70 },	
			{ label: "Indonesia", y: 5.00 },
			{ label: "Australia", y: 2.50 },	
			{ label: "Mexico", y: 2.30 },
			{ label: "UK", y: 1.80 },
			{ label: "United States", y: 1.60 },
			{ label: "Japan", y: 1.60 }
			
		]
	}]
});
chart.render();

}

Related Customization

You can easily change the type of chart using type property. Some other common customizations include color, animationEnabled, theme, subtitles, etc.