Highcharts Area Range charts zooming and tooltip queries

Question

I am trying to get a few things done in the high charts area range chart:

I am trying to be able to zoom into the chart mainly y axis and I am unable to do that can someone suggest me how that can be achieved I am adding the jsfiddle link below with the sample code where I am trying to add the zoom.
For the tooltip of the same chart I am trying to get the value of the point as well as the range values for the same point when I hover over it. Also I don't want any tooltip when I hover on the range. i.e. if I hover over the point for AAL 1A Nov'22 3311.6781801806596 in the tooltip I am expecting to see

AAL_1A: 3311.6781801806596 AAL_1A 95 range: 3066.798502204227, 3556.557858157093

but what I have written with that I don't see any tooltip to be generated, can someone help me on how to get what I am expecting

JS Fiddle:

codeMy code

magdalena · Answer 1 · 2023-02-22T20:55:48.580

In the case of zoom, use chart.zooming option. You can choose the type of zooming - x, y or xy.

API Reference: https://api.highcharts.com/highcharts/chart.zooming https://api.highcharts.com/highcharts/chart.zooming.type

When It comes to tooltip, you need to set enableMouseTracking: false for each arearange series type and improve the formatting function.

 tooltip: {
 formatter() {
   const {
     series,
     x,
     y
   } = this;
   let text = '';
   series.chart.series.forEach(series => {
     if (this.series.options.name === series.name) {
       text += `<span style=\"color:${this.color}\">●</span> ${series.name}: <b>${this.y}</b><br/>`
     } else if (this.series.options.name === series.options.linkedTo) {
       series.points.forEach(point => {
         if (x === point.x && point.options.high) {
           text += `<span style=\"color:${point.color}\">●</span> ${series.name}: <b>${point.low}</b> - <b>${point.high}</b><br/>`
         }
       })
     }
   })
   return text
 }

},

Demo: https://jsfiddle.net/BlackLabel/zumfjth2/

Highcharts Area Range charts zooming and tooltip queries

1 Answers1