base chart slice color on series value?

Question

Right now I'm using a custom palette to display warning level counts in a pie chart. However, occasionally an alarm comes in with an unexpected severity which messes up the colors. I would like to set up some CSS classes like warningPie, criticalPie or minorPie with orange, red and yellow respectively. Then, I'd like to use the series label text to apply the class.

I don't see anything in the dxchart documentation that would make this possible. Does anyoe have any ideas?

Here is my full chart code if anyone is curious.

dxPieChart: {
    dataSource: fieldValueCount(['severity']),
    palette: ['#CC3300', '#FF9900', '#FFFF00',  '#33CC33', '#0066FF'],
    animation: true,
    legend: {
        backgroundColor: '#FCFCFC',
        border: {
                color: 'black',
                width: .5,
                visible: true,
                cornerRadius: 10
        },
        visible: false
    },
    series: [{
        type: 'doughnut',
        argumentField: 'severity',
        valueField: 'count',
        label: {
            visible: false,
            font: {
                size: 12,
                color: 'black'
            },
            radialOffset: -15,
            backgroundColor: 'rgba(0,0,0,0)',
            connector: {
                visible: false,
                width: 0.5
            },
            position: 'inside',
            customizeText: function(arg) {
                globalTest = arg;
                return arg.value + ' (' + arg.percentText + ')';
            }
        },
        border: {
            color: 'black',
            width: .5,
            visible: true
        },
        hoverStyle: {
            border: {
                color: 'black',
                width: .5,
                visible: true
            }
        }
    }],
    tooltip: {
        enabled: true,
        color: 'cornflowerblue',
        font: {
            size: 14
        },
        customizeText: function(arg) {
            globalTest = arg;
            var content = arg.argumentText + '<br>' +  arg.value + ' (' + Math.round(arg.percent * 100) + '%)';
            return content
        }
    },
        title: {
            text: ' ',
            font: { size: 14 },
            horizontalAlignment: 'center'
        }
}

Answer 1

You can use customizePoint and customizeLabel options in the pie chart.