Chartjs-Set scroll on bar chart in chartjs

by

3👍

You can inclose your canvas in a div…

<div id="parentDiv">
  <canvas id="myChart" height="500"></canvas>
</div>

…and define the following CSS for the parent div:

#parentDiv {
  height: 120px;
  width: 300px;
  overflow: auto;
}

Please take a look at below runnable code snippet and see how it works.

new Chart(document.getElementById('myChart'), {
  type: 'horizontalBar',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'],
    datasets: [{
      label: 'My Dataset',
      data: [15, 13, 11, 10, 9, 8, 7, 6, 6, 5, 4, 3, 2, 2, 1],
      backgroundColor: 'rgba(0, 0, 255, 0.2)',
      borderColor: 'rgb(0, 0, 255)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    title: {
      display: false
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
#parentDiv {
  height: 120px;
  width: 300px;
  overflow: auto;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<div id="parentDiv">
  <canvas id="myChart" height="500"></canvas>
</div>

Leave a comment