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',
},
],
};
}
You need to set states.hover
to false
.
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
}
API Reference: https://api.highcharts.com/highcharts/series.sunburst.states.hover.enabled