[Chartjs]-Pagination in Bar chart using ChartJS

by

5👍

✅

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

3👍

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 = new Chart(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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="wrapper">
    <div class="chartWrapper">
        <canvas id="myChart" height="19"></canvas>
    </div>
</div>

JSFiddle

Leave a comment