Hello.

I want to add a function to the value of a chart. Something very similar to this case.

JsFiddle_ClickOnPoint

I already have the function to zoomIn and zoomOut and I have already tested and it works. The problem is that I'm using the whole graph to click and zoomIn. Zoom works all over the map except in points. In other words, I want to get the opposite behavior.

There is the function that I am using. The expected result will be as in the fiddle example

SyntaxEditor Code Snippet

chart: {
            events: {
              load: function() {
                this.clickedOnce = false;                
              },
              click: function(e) {
                const chart = this,
                  yAxis = chart.yAxis[0],
                  xAxis = chart.xAxis[0];

                let x,
                  y,
                  rangeX,
                  rangeY;

                if (!chart.clickedOnce) {
                  x = xAxis.toValue(e.chartX);
                  y = yAxis.toValue(e.chartY);
                  rangeX = xAxis.max - xAxis.min;
                  rangeY = yAxis.max - yAxis.min;

                  xAxis.setExtremes(x - rangeX / 10, x + rangeX / 10, false);
                  yAxis.setExtremes(y - rangeY / 10, y + rangeY / 10, false);
                  chart.redraw();

                  chart.clickedOnce = true;
                } else {
                  chart.zoomOut();
                  chart.clickedOnce = false;
                }
              }
            }
          },

I already tried the code as mentioned in the fiddle. I already added to the data series without success.

Try this one without sucess :(. 

SyntaxEditor Code Snippet

plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        alert('1');
                    }
                }
            },
            animation: {
                duration: 2000
            }
        }
    }

Best regards