jQuery Charts & Graphs inside Resizable Container

Download jQuery Chart Samples

Charts can easily be placed inside jQuery Resizable Container & updated on resize event. Given example demonstrates a Chart inside jQuery resizable container. You can resize the chart container using handle at the bottom right. It also includes source code that you can edit in-browser or save to run locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function () {

// Construct options first and then pass it as a parameter
var options1 = {
	animationEnabled: true,
	title: {
		text: "Chart inside a jQuery Resizable Element"
	},
	data: [{
		type: "column", //change it to line, area, bar, pie, etc
		legendText: "Try Resizing with the handle to the bottom right",
		showInLegend: true,
		dataPoints: [
			{ y: 10 },
			{ y: 6 },
			{ y: 14 },
			{ y: 12 },
			{ y: 19 },
			{ y: 14 },
			{ y: 26 },
			{ y: 10 },
			{ y: 22 }
			]
		}]
};

$("#resizable").resizable({
	create: function (event, ui) {
		$("#chartContainer1").CanvasJSChart(options1);
	},
	resize: function (event, ui) {
		//Update chart size according to its container size
		$("#chartContainer1").CanvasJSChart().render();
	}
});

}

Chart Customizations

You can change type of chart using type property. You can also customize the chart using color, fillOpacity, or enable different features line zoom / pan, animation using zoomEnabled, animationEnabled, etc.

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