Chart JS – Make chart scrollable if too much data

by

👍:-1

If You want to add scrollbar after a certain amount of data in Chart.js. Then you can use CSS to allow horizontal (overflow-x: scroll;) or vertical (overflow-y: scroll;) scroll.

<style>
.chartWrapper {
  position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: 15000px;
  overflow-x: scroll;
}
</style>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <canvas id="chart" height="400" width="15000"></canvas>
  </div>
</div>

For more example you can use – http://jsfiddle.net/rbdqxfzL/140

Leave a comment