Code: Select all
<div id="container"></div>
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
spacingRight: 30,
},
legend: {
align: 'left',
verticalAlign: 'bottom',
layout: 'vertical',
itemMarginTop: 5,
itemStyle: {
fontWeight: 'normal'
},
useHTML: true,
labelFormatter: function () {
return `<span>${this.name}</span>`
}
},
title: {
text: ''
},
tooltip: {
formatter: function () {
return `<b style="color: ${this.color}">${this.key}</b>: ${this.percentage.toFixed(1)} %`
}
},
plotOptions: {
pie: {
minPointLength: 2,
allowPointSelect: true,
cursor: 'pointer',
showInLegend: false,
}
},
series: [
{
type: 'pie',
dataLabels: {
enabled: true,
format: '<b Ring1</b>',
},
size: '66%',
innerSize: '33%',
name: 'Ring1',
data: [
{
name: 'green_data', y: 22,
color: 'green',
},
{
name: 'red_data', y: 88,
color: 'red',
},
],
animation: false,
} ,
{
type: 'pie',
dataLabels: {
enabled: true,
format: '<b>Ring2</b>',
},
size: '100%',
innerSize: '66%',
name: 'Ring2',
data: [
{
name: 'green_data', y: 44,
color: 'green',
},
{
name: 'red_data', y: 23,
color: 'red',
},
],
animation: false
}]
});- Display series name (Ring1, Ring2) -each label should be displayed once on the chart on the relevant ring (currently it is displayed for each data point - twice for each ring
- create a legend that will accumulate data point names, i.e the legend will contain only 2 rows - green_data and red_data and clicking on it will hide/display all data point with the same name (the default legend will display a row for each of the data points - green_data and red_data will appear twice (each for a ring). Thank you in advance, Veronika