HighCharts中如何将饼图中的图例作为数据标签

Question

I have a couple of questions while dealing with Pie Charts in High charts.

1. How to change the legend's shape apart from the circle.
2. I want to display legends in data labels prior to percentage values.
3. And also with an increase in data, data labels are not radical to the pie chart. How to fix this.

my chart options:

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
   
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '{point.percentage:.1f} %'
            },
            showInLegend: true
        },
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        dataLabels: {
        connectorWidth : 0
        },
        showLegends: true,
        data: [{
            name: 'Chrome',
            y: 61.41,
           
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }, {
            name: 'Firefox',
            y: 10.85
        }]
    }]
});

my code pen

Would be grateful if I get an answer to any of my questions.

Answer 1

1. The API allows customizing the legend symbol by setting options like symbolRadius or symbolHeight .

Demo: https://jsfiddle.net/BlackLabel/1m98xgvr/

API: https://api.highcharts.com/highcharts/legend.symbolHeight

If you want to change the legend symbol to the custom png try to use this solution:

Custom Highcharts legend symbol

---

2. You can set the dataLabels.useHTML flag to true and use the dataLabes.formatter callback to customize the output which will be an outstanding HTML element.

Demo: https://jsfiddle.net/BlackLabel/2sog3znq/

---

3. Here I am not sure what do you have in mind - could you explain it more precisely?