angularhighchartsangular2-highcharts

Change cursor on chart for zooming

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;
}
Solution

  • @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 :