Как отобразить полный текст в метках данных в солнечных лучах

Question

Я пытаюсь отобразить полный текст в метках диаграммы. Переполнение атрибута Given: разрешить и обрезать false. Не работает, не уверен, что мне не хватает. Мне нужно добавить класс с переносом слов: сломать все.

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/sunburst/

Highcharts.getOptions().colors.splice(0, 0, 'transparent');


Highcharts.chart('container', {

    chart: {
        height: '100%'
    },

    title: {
        text: 'World population 2017'
    },
    subtitle: {
        text: 'Source'
    },
    series: [{
        type: "sunburst",
        data: data,
        allowDrillToNode: true,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            overflow:'none',
            crop:false,
            allowOverlap:true,
             padding:0,
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            }
        },
        levels: [{
            level: 1,
            levelIsConstant: false,
            dataLabels: {
                overflow:'none',
             allowOverlap:true,
             padding:0,
            crop:false,
                filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                }
            }
        }, {
            level: 2,
            colorByPoint: true
        },
        {
            level: 3,
            colorVariation: {
                key: 'brightness',
                to: -0.5
            }
        }, {
            level: 4,
            colorVariation: {
                key: 'brightness',
                to: 0.5
            }
        }]

    }],
    tooltip: {
        headerFormat: "",
        pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
    }
});

Answer 1

Каждый dataLabel имеет ту же ширину, что и ширина формы точки. Вы можете изменить это значение:

    events: {
        load: function() {
            Highcharts.each(this.series, function(s) {
                Highcharts.each(s.points, function(p) {
                    if (p.dataLabel) {
                        p.dataLabel.css({
                            width: '200px'
                        })
                    }
                });
            });
        }
    }

Демонстрационная версия: https://jsfiddle.net/BlackLabel/24yt09s5/

API: https://api.highcharts.com/class-reference/Highcharts.SVGElement