Does anyone know how I can make charts that are made using chart.js scrollable. I have a bar chart which has a very long list of categories on the x-axis. When I change the browser view to mobile screen the labels on the x-axis go into each other and it becomes impossible to read the different categories.

I'm looking for a solution for this by making the chart scrollable horizontally. Is that possible??

Does anyone know how I can make charts that are made using chart.js scrollable. I have a bar chart which has a very long list of categories on the x-axis. When I change the browser view to mobile screen the labels on the x-axis go into each other and it becomes impossible to read the different categories.

I'm looking for a solution for this by making the chart scrollable horizontally. Is that possible??

• javascript
• html
• css
• twitter-bootstrap-3
• chart.js

• I found this online but im not sure if this works with your charts.js version. Which one is it? stackoverflow.com/questions/35854244/… Good luck – jayms117 Commented Sep 13, 2016 at 15:57
• try jsfiddle.net/rbdqxfzL/140 This is not a perfect solution because it is parent div which is made scrollable and not the chart itself. However, the solution should work fine for very significantly large data set as well – Abhas Tandon Commented Sep 13, 2016 at 16:09

2 Answers 2

ChartJs doesn't support scrollable axis natively. ChartJs charts are responsive and change width according to parent container. You can use this to create a large parent container and have your ChartJs canvas inside it. overflow: auto property with little markup should give you the desired result.

See demo: http://jsfiddle.net/rbdqxfzL/140

HTML

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

CSS

.chartWrapper {
  position: relative;
}

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

.chartAreaWrapper {
  width: 15000px;
  overflow-x: scroll;
}

Use the chartjs-plugin-zoom plugin for Chart.js where you can use zooming and padding to suit your needs.

plugins: {        
   zoom: {
      pan: {
         enabled: true
      },
      zoom: {
         enabled: true
      }
   }
}