Setting Plot Area Width According to the Number of Data Points - CanvasJS JavaScript Charts

Setting Plot Area Width According to the Number of Data Points - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", { 
	title:{
		text:"Setting Plot Area Width According to the Number of Data Points",
		fontSize: 20
	},
	data: [{
		type: "line",
		dataPoints: []
	}]
});

var noOfDps = 500; 
var yVal = 10;
for (var i = 0; i < noOfDps; i += 1) {
	yVal += (Math.random() * 10 - 5);
	chart.options.data[0].dataPoints.push({y: yVal});
}

chart.render();

var range = chart.axisX[0].get("viewportMaximum") - chart.axisX[0].get("viewportMinimum");
	if(chart.plotArea.width !== range){
		chart.set("width", chart.width - (chart.plotArea.width - range));
}