Updating Chart's size according to its container's size on change of its visibility.

Updating Chart's size according to its container's size on change of its visibility.

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
<input type="button" value="click me to show graph then resize the window" onclick="showgraph();">

CSS

#chartContainer{
height: 250px; 
width: 95%; 
display: none;

}

#resize {

    display:none;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
	backgroundColor: "#F5DEB3",
	axisX:{      
		interval: 2,
		lineThickness:0,
		tickThickness:0,
		valueFormatString:" ",
		gridThickness: 0,
		margin: 0,
		tickLength: 0,
	},
	axisY: {
		lineThickness:0,
		tickThickness:0,
		valueFormatString:" ",
		gridThickness: 0,
		margin: 0,
		tickLength: 0,
		maximum:30
	},
	data: [
    {        
		name: "received",
		legendMarkerType: "square",
		type: "area",
		color: "rgba(40,175,101,0.6)",
		markerSize: 0,
		dataPoints: [
			{x:new Date(2013,0,1,00,00) , y: 30},
			{x:new Date(2013,0,1,01,00) , y: 30},
			{x:new Date(2013,0,1,02,00) , y: 30},
			{x:new Date(2013,0,1,03,00) , y: 30},
			{x:new Date(2013,0,1,04,00) , y: 30},
			{x:new Date(2013,0,1,05,00) , y: 30},
			{x:new Date(2013,0,1,06,00) , y: 30},
			{x:new Date(2013,0,1,07,00) , y: 30},
			{x:new Date(2013,0,1,08,00) , y: 30},
			{x:new Date(2013,0,1,09,00) , y: 30}
		]
	},
	{        
		name: "sent",
		legendMarkerType: "square",
		type: "area",
		color: "rgba(0,75,141,0.7)",
		markerSize: 0,
		dataPoints: [
			{x:new Date(2013,0,1,00,00) , y: 12  },
			{x:new Date(2013,0,1,01,00) , y: 10},
			{x:new Date(2013,0,1,02,00) , y: 3},
			{x:new Date(2013,0,1,03,00) , y: 5},
			{x:new Date(2013,0,1,04,00) , y: 2},
			{x:new Date(2013,0,1,05,00) , y: 1},
			{x:new Date(2013,0,1,06,00) , y: 3},
			{x:new Date(2013,0,1,07,00) , y: 6},
			{x:new Date(2013,0,1,08,00) , y: 14},
			{x:new Date(2013,0,1,09,00) , y: 15}
		]
	}
	]
});
//chart.render(); 

function showgraph() {
	$('#chartContainer').show();  
	chart.render();
	$('#resize').show(); 
};