8👍
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;
}
0👍
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
}
}
}
Source:stackexchange.com