"Changing colours on pie chart" (#2664720) / TMS-Plugins

Comments

StoryRoar started the conversation
January 20, 2021 at 12:41am
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

2,572

Aleksandar replied

January 21, 2021 at 9:34am

Hello Jackson

Thank you for your purchase.

You can combine the two callbacks, like this:

<script type="text/javascript">
jQuery(window).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[15] = function(obj){
        obj.options.plotOptions.pie = {
            colors: [
                    '#50B432',
                    '#ED561B',
                    '#DDDF00',
                    '#24CBE5',
                    '#64E572',
                    '#FF9655'
            ],
            dataLabels: {
                    enabled: false
           },
           showInLegend: true
        }
    }
});
</script>

That should work:

Kind Regards,

Aleksandar Vuković
[email protected]

Rate my support

You can try wpDataTables add-ons before purchasing on these sandbox sites:

Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

StoryRoar replied

January 22, 2021 at 1:41am

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>

2,572
Aleksandar replied
January 24, 2021 at 12:52pm
I honestly don't know, Jackson
This would require me to test the placeholders you used, and see what needs to be rearranged (and in what way), or added, or removed in order to help you with this.
Unfortunately, using wpDataChart callbacks requires some coding experience, and included support refers only to advice. As you can see, our response times are already long, and I simply can't invest time in debugging the callback, as much as I'd like to help you out with this, but due to this I would not be able to help you with this any further I'm afraid.
Sorry
Kind Regards,

Aleksandar Vuković
[email protected]

Rate my support

wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

You can try wpDataTables add-ons before purchasing on these sandbox sites:

Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables