rangeChanged not triggering on zoom

[ekaqu1028]

I have a rangeChanged event listener and see it works well when i use the range buttons, but when i use my mouse to zoom in the event isn’t getting triggered. Based off the docs I expect that it should be triggered, is something needed to make sure it does?

The jist of my logic is

let options = {
animationEnabled: false,
theme: “light2”, // “light1”, “light2”, “dark1”, “dark2”
zoomEnabled: true,
exportEnabled: true,
dataPointWidth: 2,
rangeChanged: function(e) {
self.createEventTooltips(e.stockChart)
},
…

I see in a debugger that the event only fires during the range buttons and not zoom

[ekaqu1028]

Also, when i hit the arrow to undo the zoom the rangeChanged function triggers, so it only seems to not trigger on the actual zoom… I tried to repo from the examples on the site but wasn’t able to.

I also tried rangeChanging, but seems to have the same issue for me.

[Manoj Mohan]

@ekaqu1028,

rangeChanging and rangeChanged events seems to be working fine and are getting triggered even on zooming / panning the chart. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can understand your scenario better and help you out?

—-
Manoj Mohan
Team CanvasJS

[ekaqu1028]

I finally figured it out… rangeChange on the stockChart doesn’t trigger, but rangeChange on the underline chart does, so had to register the handler on each chart as well.

stock chart event != chart event, so also had to normalize to get it working

on stockChart options

rangeChanged: function(e) {
// normalize to show StockChart
if (isUndefined(e.stockChart)) {
e.stockChart = self.lastChart
e.maximum = e.axisX[0].viewportMaximum
e.minimum = e.axisX[0].viewportMinimum
}
opts.onRangeChange(e) // real handler
},

then for each chart

for (var i = 0; i < options.charts.length; i++) {
options.charts[i].zoomEnabled = true
options.charts[i].rangeChanged = options.rangeChanged
}

[Manoj Mohan]

@ekaqu1028,

rangeChanged event handler for stockchart are called whenever any individual chart’s range is changed by zooming/panning as well as on changing range using navigator and slider. rangeChanged event handler of individual charts are called on zooming/panning the particular chart. Also, rangeChanged event of individual charts will be called first and then of stockchart when there is a change in the range of individual charts.

You can check out this JSFiddle to check how rangeChanged event handler is called for individual charts and stockcharts.

—-
Manoj Mohan
Team CanvasJS