CODEWITHSUNDEEP
javascriptvue.jschart.jsvue-chartjs
saba
saba

Reputation: 76

set scroll on bar chart in chartjs

I have a horizontal bar chart in chart js and a lot data from server on the vuejs framework.how do I set vertical scroll on my chart and a good responsive on it? for undrestand my question, plz see this picture: scrolling data like this picture

Upvotes: 0

Views: 3764

Answers (1)

uminder
uminder

Reputation: 26170

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/[email protected]"></script>
<div id="parentDiv">
  <canvas id="myChart" height="500"></canvas>
</div>

Upvotes: 3

Related Questions