Sunburst - Simple data
Customer sales
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
CSS
#container {
min-width: 310px;
max-width: 500px;
margin: 0 auto
}
JavaScript
(function(H) {
var each = H.each,
defined = H.defined,
merge = H.merge,
pick = H.pick;
H.Legend.prototype.getAllItems = function() {
var allItems = [];
each(this.chart.series, function(series) {
var seriesOptions = series && series.options;
// Handle showInLegend. If the series is linked to another series,
// defaults to false.
if (series && pick(
seriesOptions.showInLegend, !defined(seriesOptions.linkedTo) ? undefined : false, true
)) {
// Use points or series for the legend item depending on
// legendType
allItems = allItems.concat(
series.legendItems ||
(
seriesOptions.legendType === 'point' ?
series.data.filter((i) => i.parent === '0.0') :
series
)
);
}
});
return allItems;
}
H.Legend.prototype.setItemEvents = function(item, legendItem, useHTML) {
var legend = this,
boxWrapper = legend.chart.renderer.boxWrapper,
activeClass = 'highcharts-legend-' + (item.series ? 'point' : 'series') + '-active';
// Set the events on the item group, or in case of useHTML, the item itself (#1249)
(useHTML ? legendItem : item.legendGroup).on('mouseover', function() {
item.setState('hover');
// A CSS class to dim or hide other than the hovered series
boxWrapper.addClass(activeClass);
/*= if (build.classic) { =*/
legendItem.css(legend.options.itemHoverStyle);
/*= } =*/
})
.on('mouseout', function() {
/*= if (build.classic) { =*/
legendItem.css(merge(item.visible ? legend.itemStyle : legend.itemHiddenStyle));
/*= } =*/
// A CSS class to dim or hide other than the hovered series
boxWrapper.removeClass(activeClass);
item.setState();
})
.on('click', function(event) {
var strLegendItemClick = 'legendItemClick',
fnLegendItemClick =...