Is it possible to add drag and zoom on ChartJS? I would like to do something similar like here.
Here is how I draw my line chart:
<canvas class="square_margin_less" id="myChart" width="100" height="30" > </canvas>
<script>
new Chart(document.getElementById("myChart").getContext('2d'),
{
type: 'line',
data: {
labels: {{ data.labels|safe }},
datasets:
[{
label: 'x',
data: {{ data.x }},
borderColor: 'rgba(233,105,118,1)',
},
{
label: 'y',
data: {{ data.y }},
borderColor: 'rgba(96,143,239,1)'
},
{
label: 'z',
data: {{ data.z }},
borderColor: 'rgba(144,247,136,1)'
}]
},
});
</script>
There is some way of personalizing this?
Is it possible to add drag and zoom on ChartJS? I would like to do something similar like here.
Here is how I draw my line chart:
<canvas class="square_margin_less" id="myChart" width="100" height="30" > </canvas>
<script>
new Chart(document.getElementById("myChart").getContext('2d'),
{
type: 'line',
data: {
labels: {{ data.labels|safe }},
datasets:
[{
label: 'x',
data: {{ data.x }},
borderColor: 'rgba(233,105,118,1)',
},
{
label: 'y',
data: {{ data.y }},
borderColor: 'rgba(96,143,239,1)'
},
{
label: 'z',
data: {{ data.z }},
borderColor: 'rgba(144,247,136,1)'
}]
},
});
</script>
There is some way of personalizing this?
Share Improve this question asked Apr 24, 2018 at 14:49 LechucicoLechucico 2,1128 gold badges32 silver badges70 bronze badges 1- 3 To answer your question, yes, it is possible. You could do it yourself, or check out this plugin that a simple google search turned up. github./chartjs/chartjs-plugin-zoom – rmlan Commented Apr 24, 2018 at 14:52
1 Answer
Reset to default 3I didn't find "drag and zoom" functionality for Chart.js as well as simple example with "pan and zoom" version so I've decided to implement demo version own my own.
List of external scripts is very important: hammer-js, then Chart.bundle.js and chartjs-plugin-zoom.js.
const config = {
type: 'line',
data: {
labels: [new Date('2019-08-20'), new Date('2019-08-25'), new Date('2019-08-30')],
datasets: [{
label: 'Line',
data: [2, 5, 3],
borderColor: '#D4213D',
fill: false,
}, ],
},
options: {
scales: {
xAxes: [{
type: 'time',
}, ],
},
pan: {
enabled: true,
mode: 'xy',
},
zoom: {
enabled: true,
mode: 'xy', // or 'x' for "drag" version
},
},
};
window.onload = function() {
new Chart(document.getElementById('chart'), config);
};<script src="https://cdnjs.cloudflare./ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/chartjs-plugin-zoom/0.6.6/chartjs-plugin-zoom.js"></script>
<html>
<body>
<div style="width:380px;">
<canvas id="chart"></canvas>
</div>
</body>
</html>If someone is interesting in other libraries, I found one interesting solution on Vicotry website with "brush and zoom" functionality for line charts: https://formidable./open-source/victory/guides/brush-and-zoom/.
EDIT: In the "drag" version you will have to use for zoom:
drag: {
borderColor: 'hsl(35, 100%, 60%)',
borderWidth: '3',
backgroundColor: 'hsl(35, 100%, 60%)',
},