Making chart responsive when toggling container's visibility - CanvasJS

Making chart responsive when toggling container's visibility - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<body>
<button id="toggle-trigger">Click to Show/ Hide the Chart</button>
<div id="chartContainer" style="width:100%; height:300px"></div>
</body>

JavaScript

var chart;
var width;
var height;

width = $('#chartContainer').width();
height = $('#chartContainer').height();

chart = new CanvasJS.Chart("chartContainer", {
    width: width,
    height: height,
	title: {
		text: "Demo for Hide/ Show the chart",
	},
    
	data: [
	{
		type: "column",
		dataPoints: [
			{ x: 10, y: 297571 },
			{ x: 20, y: 267017 },
			{ x: 30, y: 175200 },
			{ x: 40, y: 154580 },
			{ x: 50, y: 116000 },
			{ x: 60, y: 97800  },
			{ x: 70, y: 20682  },
			{ x: 80, y: 20350  }
		]
	}
	]
}); 
chart.render();

$("#toggle-trigger").click(function () {
	$(this).next().animate({height: "toggle"});	
}).next().hide();

$(window).resize(function() {
        chart.options.width = $('#chartContainer').width();
        chart.options.height = $('#chartContainer').height();
        chart.render();
});