angularhighchartsangular2-highcharts

Highcharts sunburst how to disable hover on sector animation?


In my below angular highcharts I want to disable hover animation when in hover on a sector/arc of the sunburst chart

Basically disable the chart from becoming skyblue on hover enter image description here

Stackblitz Demo -> https://stackblitz.com/edit/highcharts-angular-basic-sunburst-au7con-phdxy5?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

    import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

import Sunburst from 'highcharts/modules/sunburst';
Sunburst(Highcharts);

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;

  chartOptions: any = {
    chart: {
      type: 'sunburst',
      height: '100%',
    },
    series: [
      {
        type: 'sunburst',
        allowDrillToNode: true,
        data: [
          {
            id: '0.0',
            parent: '',
            name: 'The World',
          },
          ...
          },
          
        ],
        cursor: 'pointer',
      },
    ],
  };
}

Solution

  • You need to set states.hover to false.

    plotOptions: {
      series: {
        states: {
          hover: {
            enabled: false
          }
        }
      }
    }
    

    Demo: https://stackblitz.com/edit/highcharts-angular-basic-sunburst-au7con-cyfwhs?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

    API Reference: https://api.highcharts.com/highcharts/series.sunburst.states.hover.enabled