I'm working with Chart.js 2.6. I'm adding data after a chart has been created, so that I can create an overflow-x on the chart container.
Example here.
The problem is, in my example, if you change the for loop from 532 to 531 or less, the chart renders fine. However, when the count is 532 or higher, the chart throws no errors, but it is blank. I'm not sure what is causing it.
Can anyone take a look to see what it could be? It seems to be something with the way I'm incrementing the width on the chartAreaWrapper2
div on each iteration, but I can't figure out why.
JS
var ctx = document.getElementById("myChart").getContext("2d");
var chart = {
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
onComplete: function(animation) {
var sourceCanvas = myLiveChart.chart.canvas;
var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
var targetCtx = document.getElementById("myChartAxis").getContext("2d");
targetCtx.canvas.width = copyWidth;
targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);
}
}
},
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
}
};
var myLiveChart = new Chart(ctx, chart);
for(x=0;x<532;x++) {
myLiveChart.data.datasets[0].data.push(Math.random() * 100);
myLiveChart.data.labels.push("Test");
var newwidth = $('.chartAreaWrapper2').width() + 60;
$('.chartAreaWrapper2').width(newwidth);
}
HTML
<div class="chartWrapper">
<div class="chartAreaWrapper">
<div class="chartAreaWrapper2">
<canvas id="myChart"></canvas>
</div>
</div>
<canvas id="myChartAxis" height="300" width="0"></canvas>
</div>
CSS
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events:none;
}
.chartAreaWrapper {
overflow-x: scroll;
position: relative;
width: 100%;
}
.chartAreaWrapper2 {
position: relative;
height: 300px;
}