Добавление текста вручную на круговой диаграмме

Question

3 ломтика в моей круговой диаграмме попадают в одну категорию. Это серые кусочки (174, 29, 234). Можно ли наложить текст на обложку всеми 3 кусочками. Может ли текст наложения вращаться или изгибаться, чтобы покрыть серые фрагменты.

Вот моя рабочая скрипка: https://jsfiddle.net/1h8p257c/

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Types of Actions'
},
    subtitle: {
        text: 'October 31, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b>'
    },
    plotOptions: {
        pie: {
            size:230,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                distance: -50,
                format: '{point.y:f}',
                color:'black'
            },
            showInLegend: true
        }
    },
    legend: {
      align: 'left',
      verticalAlign: 'middle',
      layout:'vertical'
    },
    series: [{
        name: 'Types',
        colorByPoint: true,
        data: [{
            name: 'Consent Order 1',
            y: 234,
            color:'#808080',
            legendIndex: 1
        }, {
            name: 'Consent Order 2',
            y: 29,
            color:'#C0C0C0',
            legendIndex: 2
        }, {
            name: 'Consent Order 3',
            y: 174,
            color:'#DCDCDC',
            legendIndex: 3
        },{
            name: 'Not Likely',
            y: 165,
            color:'#1E90FF',
            legendIndex: 4
        }, {
            name: 'No Testing',
            y: 2,
            color:'#FF0000',
            legendIndex: 5
                }]
    }]
});

Answer 1

Вы можете использовать Highcharts.SVGRenderer для добавления дополнительного текста на график:

    events: {
        load: function(){
            var center = this.series[0].points[2].shapeArgs;

            this.renderer.text(
                'someText', 
                center.x + this.plotLeft - 20, 
                center.y + this.plotTop + 50
            ).attr({
                fill: 'red',
                'font-size': '20px',
                rotation: -45,
                zIndex: 10
            })
            .add();
        }
    }

Живая демоверсия: https://jsfiddle.net/BlackLabel/t04gqy2h/

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

Answer 2

Если они все одной категории, почему бы не объединить их так:

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Types of Actions'
},
    subtitle: {
        text: 'October 31, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b>'
    },
    plotOptions: {
        pie: {
            size:230,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                distance: -50,
                format: '{point.y:f}',
                color:'black'
            },
            showInLegend: true
        }
    },
    legend: {
      align: 'left',
      verticalAlign: 'middle',
      layout:'vertical'
    },
    series: [{
        name: 'Types',
        colorByPoint: true,
        data: [{
            name: 'Consent Order 1 - 3',
            y: 437,
            color:'#808080',
            legendIndex: 1
        }, {
            name: 'Not Likely',
            y: 165,
            color:'#1E90FF',
            legendIndex: 4
        }, {
            name: 'No Testing',
            y: 2,
            color:'#FF0000',
            legendIndex: 5
				}]
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://codehighcharts/modules/exporting.js"></script>
<script src="https://codehighcharts/modules/data.js"></script>
<script src="https://codehighcharts/modules/drilldown.js"></script>
<script src="https://codehighcharts/modules/export-data.js"></script>

<div id="container"></div>

Или имеет значение разделение?