Hello, I've noticed a website where the highcharts pie chart colours have been edited and I'm just wondering how this is done with the chart legend visible?

The website I noticed it on is Fidelity.

The website I'm trying to change the colours on is VIPIM.

I have looked at the wpdatatables documentation on highcharts here and here but I can't get both the legend and the colour change working (only one or the other works, but not both).

Any assistance would be greatly appreciated.

Kind regards,

Jackson James

Thanks Aleksandar,

I ended up doing it a different way according to another thread I found.

However, the last thing I need is to edit the tooltip and legend as in the Fidelity example.

• Tooltip needs to display just the category and percentage.
• Legend needs to display the percentage before each item.

Have a put `tooltip:` and `legend:` in the wrong place?

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[1] = function(obj){
        obj.options.plotOptions = {
            series: {
                dataLabels: {
                    enabled: false
                }
            },
            pie: {
                colors: [
                    '#006769', 
                    '#00b8af', 
                    '#28c3e8', 
                    '#0ee4da', 
                    '#2a97a6'
                ],
                dataLabels: {
                     enabled: false
                },
                showInLegend: true,
            },
            tooltip: {
                formatter: function() {
                    return this.point.name + ': <b>' + Highcharts.numberFormat(this.y, 1) +'%</b>';         
                }
            },
            legend: {
                labelFormatter: function() {
                    return '<strong style="display:inline-block;width:45px;">'+Highcharts.numberFormat(this.y, 1) +'%</strong> ' + this.name ;
                }, 
                title: {
                    style: {
                        fontSize: '18px',
                        fontFamily: "'neuzeit-grotesk', sans-serif",
                        color: '#20242b'
                    },
                    text : 'By industry'
                },
                squareSymbol: true, 
            },
        };
    };
});
</script>