[Chartjs]-Making chartjs scrollable on the x-axis

by

1👍

Place your canvas inside a div and define their width as shown below. Make sure also, to define CSS overflow: auto on the wrapping div element.

<div style="width: 600px; overflow: auto;">
  <canvas id="myChartAxis" width="1500" height="120"></canvas>
</div>

To avoid that the canvas automatically resizes when the wrapper div does, make sure, the chart is not responsive. This needs to be defined inside the chart options as follows: 

options: {
    responsive: false

Please have a look at the running code sample below:

new Chart(document.getElementById('myChartAxis'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
    datasets: [{
        label: 'WARNINGS',
        data: [1, 2, 2, 2, 3, 2, 1, 4, 4, 2, 1, 4, 3, 4],
        borderColor: 'rgb(255, 159, 64)',
        backgroundColor: 'rgba(255, 159, 64, 0.2)'
      },
      {
        label: 'ERRORS',
        data: [4, 5, 3, 2, 1, 0, 3, 2, 5, 5, 3, 4, 2, 1],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)'
      }
    ]
  },
  options: {
    responsive: false
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div style="width: 600px; overflow: auto;">
  <canvas id="myChartAxis" width="1500" height="120"></canvas>
</div>

Leave a comment