Using Panning (chartjs-plugin-zoom) with Financial Chartjs
LongPeakBlue opened this issue · 7 comments
Hi,
I am having some difficulty in getting x-axis Panning (from chartjs-plugin-zoom) to work with chartjs-chart-financial.
I am able to use the Zoom functionality fine and zooming in/out of the financial candlestick chart is working as expected.
After zooming into the financial chart, I can pan up/down on the y-axis perfectly fine to view the rest chart on the y-axis (which is off the screen due to just zooming in).
However, when I try to pan left/right on the chart after zooming in, it doesn't seem to work. The financial chart changes and snaps back and is no longer zoomed in on the x-axis. Suddenly, the chart is showing all of the x-axis data like it was before I zoomed into the chart... although keep in mind, the y-axis is still zoomed in/stretched.
Has anyone else tried getting panning (particularly x-axis panning) to work properly on zoomed ChartJS Financial candlestick Charts? I'm wondering whether this issue is known? Is it a bug or whether panning is just not supported on the financial charts?
I'm currently using:
- ChartJS v3.2.1
- chartjs-plugin-zoom v1.0.1
- chartjs-chart-financial v0.1.0
Please note: I have tested this with both 'candlestick' and normal 'line' charts. I am only facing these x-axis panning issues on 'candlestick' charts. For 'line' charts, I can zoom in and pan around the chart staying zoomed in on both axes, unlike 'candlestick' where the x-axis doesn't pan.
See below for my chart config:
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [{
label: 'Test label',
data: priceData
}]
},
options: {
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
wheel: {
enabled: true,
modifierKey: 'ctrl'
},
pinch: {
enabled: true
},
mode: 'xy',
}
}
}
}
});
I had the same problem, fixed it by importing hammer.js.min
Add the hammer.min.js file to your project, and include it in your html. Make sure you import it before chartjs-plugin-zoom.js. If you don't then it won't work.
This is what my index page looks like:
<script src="./chartjs-chart-financial.js" type="text/javascript"></script>
<script src="./libs/hammer.min.js" type="text/javascript"></script>
<script src="./libs/chartjs-plugin-zoom.js" type="text/javascript"></script>
There do seem to be issues using panning with chartjs-chart-financial, it goes all weird for me if the chart data is off the canvas, sometimes bouncing left and right when you drag. It's never worked properly, with this library, to be honest.
Hi @GTsappis thank you for you reply.
I am already using this hammer.js library. I did mention in my original post, that I can pan on the y-axis perfectly fine (dragging chart up/down after zooming in). I am only having issues on x-axis panning (dragging chart left/right after zooming in). If I had had not included this hammer.js library already, then I presume y-axis panning would have also not worked. So I know my hammer.js is working as expected.
Please see below for my script tags in html file:
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.0.1/chartjs-plugin-zoom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon"></script>
<script src="/js/chartjs-chart-financial.js" type="text/javascript"></script>
I am a bit confused by your reply - you say you have the same problem and you fixed it, but then you also say that there's issues when panning left/right.
Just to be clear, this thread is exactly about that - panning (dragging) left/right on the x-axis, after zooming into the financial chart. When I try to pan left/right on the chart after zooming in, it doesn't seem to work. The financial chart changes and snaps back and is no longer zoomed in on the x-axis. Suddenly, the chart is showing all of the x-axis data like it was before I zoomed into the chart... although keep in mind, the y-axis is still zoomed in/stretched.
So, is panning (dragging) on x-axis/left/right working on the financial charts or not?
Hi, I've uploaded my test files which show the zoom & pan working:
https://jsfiddle.net/qj6vomx0/7/
(Use Chrome, might not work in Firefox, keeps showing a script error for me)
You should be able to pan left/right, up/down, even while zoomed in.
Might be of use to you?
Note:
The 'chart.config.options.scales.x.time.round' property should be set.
I couldn't find any documentation about this property, I found it while going through the unminified chartjs-plugin-zoom code (lines 195-204, and line 218).
The property takes a string, valid values are:
second, minute, hour, day, week, month, quarter, year
This chart is still very buggy, I need to find a way to prevent the chart from moving fully offscreen otherwise it judders..
Hi @GTsappis
Thanks very much for your js fiddle example.
I have managed to get the x-axis panning working! It seems it was not that complex, I did not need to use chart.config.options.scales.x.time.round, simply all I had to do was add type: 'time' to options.scales.x. Once I set this one line change, x-axis panning started to work.
See below for working code:
var ctx = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [{
label: `Test label`,
data: priceData
}]
},
options: {
scales: {
x: {
display: true,
type: 'time'
},
y: {
display: true,
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy'
},
zoom: {
wheel: {
enabled: true,
modifierKey: 'ctrl'
},
pinch: {
enabled: true
},
mode: 'xy',
}
}
}
}
});
The panning/dragging of the chart now works nice and smooth.
Panning on your example is a bit jumpy (maybe expected I don't know), but I think this is because of the custom ticks you are using. I removed below ticks from your x-axis and the panning is much smoother:
ticks: {
autoSkip: true,
autoSkipPadding: 50,
maxRotation: 0
},
time: {
displayFormats: {
hour: 'HH:mm',
minute: 'HH:mm',
second: 'HH:mm:ss'
},
//round: 'hour',
//round: 'day',
round: 'week',
//round: 'month',
}
Although, I am also facing the same bug where if the chart is dragged off the screen completely then the chart seems to disappear and you can't drag it back into the chart view.
@GTsappis I figured out how to stop it from flying off the canvas.
Set plugins.zoom.limits.x:
limits: {
x: {
min: barData[0].x,
max: barData[barData.length-1].x
}
}
Updated your jsfiddle: https://jsfiddle.net/wf3ag5ye/
EDIT:
Without data gaps (smoother): https://jsfiddle.net/y0m8tbLq/
Nice one, that's working much better now!
You are welcome.
I am closing this issue as I have resolved the original problem.