Pagination In Bar Chart Using Chartjs

I am using chartJS for display some data with Bar Chart. there are some issues with chartJs. When i have to much data-filed for example 100 or more data-field and it have long last

Solution 1:

You can try this solution to consider the chart scroll like this:

Clone a different canvas for y axis so that when you scroll then only bars will appear to move

Adding the canvas for y axis

 <canvas id="myChartAxis" height="600" width="0"></canvas>

Now cloning the axis

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

For a Demo see this FIDDLE

For better visualization its better to avoid labels in x axis and show this info intuitive via tool tip anyhow

Solution 2:

You could wrap the canvas with a wrapper class and change its width accordingly which suites you the best. also, if you don't want the chart to cover entire screen, you can wrap it with another wrapper class.

var lbl = [];
var dt = [];
for (var i = 1; i <= 100; i++) {
    lbl.push("this_is_my_lable_name_" + i);
}
for (var i = 1; i <= 100; i++) {
    dt.push(Math.floor((Math.random() * 100) + 1));
}
var ctx = document.getElementById("myChart");
var myChart = newChart(ctx, {
    type: 'bar',
    data: {
        labels: lbl,
        datasets: [{
            label: '# of Votes',
            data: dt,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

.wrapper {
  width: 600px;
  height: 400px;
  overflow-x: scroll;
}
.chartWrapper {
  width: 6000px;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script><divclass="wrapper"><divclass="chartWrapper"><canvasid="myChart"height="19"></canvas></div></div>

_JSFiddle