Echart Custom label in sunburst chart

Question

option = {
    tooltip: {},
    series: {
        label: { rotate: 'tangential', },
        nodeClick: false,
        radius: ['15%', '80%'],
        type: 'sunburst',
        sort: null,
        data: [
            {
                name: "sun",
                value: 3456,
                itemStyle: { color: '#814175' },
                label: { formatter: '{b}\n\n{c}' },
                children: [{ name: '', value: 2221, itemStyle: { color: '#a4829d' }, }]
            },


            {
                name: "mon",
                value: 6555,
                itemStyle: { color: '#498ce7' },
                label: { formatter: '{b}\n\n{c}' },
                children: [{ name: '', value: 5001, itemStyle: { color: '#79aefa' }, }]
            },],

    }
};

https://i.sstatic.net/lcA0o.jpg

This is my chart in the first picture.When i hover the chart the label was hide(second picture). i need to show all label on hover.

Answer 1

The way to do this would be to assign the formatter for emphasis and downplay. You can have different formats for the default label, the label that is hovered and the non-hovered labels

series: [
    {
        type: 'sunburst',
        data: [],
        label: {
            formatter: 'E.g. A \n{b}\n\n{c}'
        },
        emphasis: {
            label: {
                formatter: 'E.g. B \n{b}\n\n{c}'
            }
        },
        downplay: {
            label: {
                formatter: 'E.g. C \n{b}\n\n{c}'
            }
        }
    }
]