Highcharts sunburst how to disable hover on sector animation?

Question

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

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',
      },
    ],
  };
}

score 1 · Accepted Answer · answered Oct 12 '22 at 08:50

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

Highcharts sunburst how to disable hover on sector animation?

1 Answers1