Change cursor on chart for zooming

Question

I'm trying to figure out how change the default cursor on over the chart ('zoom-in'), change when onmousedown ('col-resize'), and reset it on onmouseup ('zoom-in'). All of that, without breaking the behaviour of zoom.

I declare the zoom in the chart option to enabled it :

chart: {
   zoomType : 'x',
},

Zoom works. But if I try to change the cursor with this code, it seems override the zoom behaviour and it not working anymore :

chart: {
   zoomType : 'x',
   events: {
     load: function () {
         const chart = this;
         chart.container.onmousedown = function () {
             chart.container.style.cursor = 'col-resize';
         };
         chart.container.onmouseup = function () {
             chart.container.style.cursor = 'zoom-in';
         };
     }
   }
}

CSS part for the default cursor :

.zoomableChart:hover {
    cursor: zoom-in;
}

Answer 1

@naren-murali Thanks, based on your answer, I produced this code :

<highcharts-chart [.......]
(mouseup)="onMouseUpChart($event)" (mousedown)="onMouseDownChart($event)" (mouseenter)="onMouseEnterChart($event)">
[....]
</highcharts-chart>

onMouseUpChart(event): void {
    event.srcElement.ownerSVGElement.style.cursor = 'zoom-in';
  }
onMouseDownChart(event): void {
    event.srcElement.ownerSVGElement.style.cursor = 'col-resize';
}
onMouseEnterChart(event): void {
    event.srcElement.querySelector('svg').style.cursor = 'zoom-in';
}

It partially works. I see 1 problem left :

• All the chart is "hoverable" : even if I clic on the axis, the cursor change. I would like just change it only if the cursor is in the chart part (not the axis, legends, ....). It seems the element with class="highcharts-plot-background" or class="highcharts-plot-border" could be great, but applying style doesn't works

Answer 2

I tried the code you shared, but the events seem to be messing with highcharts internal functionality, so I directly added the events on the container and it worked great!

I am using plain javascript since no demo was provided, please do the same with the below angular events! We need to take a view child of the container instead of querySelector!

<div (window:mousedown)="mouseDown()" (window:mouseup)="mouseUp()"></div>

let chart;

function onMouseDown(e) {
document.querySelector('#container').style.cursor = 'col-resize';
}
function onMouseUp(e) {
document.querySelector('#container').style.cursor = 'zoom-in';
}
Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-c.json', function(data) {
  // Create the chart
  Highcharts.stockChart('container', {
      rangeSelector: {
        selected: 1
      },

      title: {
        text: 'AAPL Stock Price'
      },

      series: [{
        name: 'AAPL',
        data: data,
        tooltip: {
          valueDecimals: 2
        }
      }]
    },
    chart => {

      /* chart.container.onmousedown = function(e) {
        //chart.container.style.cursor = 'col-resize';
      };
      chart.container.onmouseup = function(e) {
        //chart.container.style.cursor = 'zoom-in';
      }; */
      // Updating the chart to set zoomType does not work any longer in 10.2.1
      chart.update({
        chart: {
          zoomType: "x",
        }
      });
    });
});

#container {
    height: 400px;
    min-width: 310px;
}    
.zoomableChart:hover {
    cursor: zoom-in;
}

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

<div id="container" class="zoomableChart"
  
 onmousedown="onMouseDown()" onmouseup="onMouseUp()"></div>

Answer 3

You can use Highcharts custom events plugin, that allows you to to detect the correct mouse place, see: https://www.npmjs.com/package/highcharts-custom-events

Demo: https://blacklabel.github.io/custom_events/