[Chartjs]-How to add horizontal scroll to a bar graph in chartjs?

by

2👍

well, seems like you want to make a scrollable view?
how about just add a wrapper div between your original div and canvas, and give width for that one?

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "January", "February", "March", "April", "May", "January", "February", "March", "Coon", "May", "Dude", "Etf", "March", "April", "May"],
    datasets: [{
        label: 'Dataset 1',
        backgroundColor: '#33b5e5',
        data: [
            17,
            11,
            12,
            13,
            14,
            17,
            11,
            12,
            13,
            14,
            17,
            11,
            12,
            13,
            14,
            17,
            11,
            12,
            13,
            14,

        ]
    }]

};

var ctx1 = document.getElementById("barcanvas").getContext("2d");

window.myBar = new Chart(ctx1, {
    type: 'bar',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Bar Graph"
        },
        tooltips: {
            mode: 'index',
            intersect: false
        },
        responsive: true,
        scales: {
            xAxes: [{
                style: {
                    stacked: true,
                },
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
});
.barcanvas 
              {
                overflow-x: scroll;
              }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<div style="width: 40%" id="bardiv">
  <div style="width: 1024px">
    <canvas id="barcanvas"></canvas>
  </div>
</div>

hmmm…. is this you want??

Leave a comment