CODEWITHSUNDEEP
javascriptjquerychart.jschart.js2
Phil
Phil

Reputation: 4069

ChartJS 2 - Adding data to chart breaks after X number of items added

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;
}

Upvotes: 1

Views: 99

Answers (1)

Tot Zam
Tot Zam

Reputation: 8746

The <canvas> element has a max width. In Chrome and Firefox, that max is 32,767 pixels. See this answer for more details on the max width of the <canvas> element in different browsers.

I updated the JSFiddle to use the current canvas width as the new label, rather than just "Test". If you set the loop to iterate 531 times, if you look at the last label, it is 32676. At that point, the canvas basically reached the max width. When you try to more than 531, the width reaches a number that exceeds the max allowed width, and so the canvas object does not render.

Upvotes: 1

Related Questions