how to make a chart.js bar chart scrollable

Question

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??

Solution

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;
}