Okay
  Public Ticket #2708925
Overriding settings with Highcharts Theme object
Closed

Comments

  • Michael started the conversation

    Hi there,

    I previously submitted a ticket about adding a legend to a Pie chart and I wanted to build on that ask with another question.

    Like I said in that ticket, I was able to enable the legends in all pie charts by using a Highcharts Theme file (see code snippet below). 

    /*
    Settings to configure styling for Highcharts
    https://www.highcharts.com/docs/chart-design-and-style/themeshttps://www.highcharts.com/docs/chart-design-and-style/themes/
    */
    Highcharts.theme = {
        colors: ['#21d279', '#393745', '#6263ed', '#8adcfc', '#a0a1a5'],
        plotOptions: {
            pie: {
                dataLabels: {
                    enabled: true,
                    connectorShape: 'straight',
                    distance: '-30%',
                    color: 'white',
                    format: '<b>{point.name} FFFFFFF</b>: {point.percentage:.1f}%',
                    style: {
                        borderColor: 'green',
                        color: '#000',
                        fontSize: '20px',
                        fontFamily: 'FoundersGroteskTextWeb-Regular, Helvetica, Arial sans-serif',
                        textOutline: 'none'
                    },
                },
                showInLegend: true,
            }
        }
    };
    // Apply the theme
    Highcharts.setOptions(Highcharts.theme);
    I know it was recommended to use a callback function to add certain functionality to specific charts, but writing code for each chart is a bit unsustainable.

    Moreover, I know my theme object code is working because properties like "showInLegend" and "distance" are working and being applied to all charts. However, not all properties in that object are working. For instance, when I try to format the charts using the "format" property, it doesn't work. Unfortunately for that specific property I have to rely on a wpDataTables callback function.

    I imagine this is because settings/code in wpDataTables are overwriting the settings in this object. Is there any way I can force the Highcharts charts to rely on just the settings in the object? Without having to write a callback function for each chart?

    I'm comfortable with removing code, writing functions, etc so I'm happy to do whatever needs to be done to make that happen. I just need some guidance and would be so appreciative if it's possible :)

    Thank you!

    (Your team is always so hopeful)

    - Michael

  • [deleted] replied

    Hi Michael

    Thank you for reaching out to us.

    Unfortunately this is possible only using callbacks, some settings can be forwarded but not the entire object.

    Do let us know if there is anything else we can assist you with.

  • Michael replied

    Thanks, Blaženka!

    It'd be a great feature so just requesting it in a future release if possible ;)

  • [deleted] replied

    Hi Michael

    Any suggestion is much appreciated, so please take the time to submit it following this link so it would go directly to our developerssmile.png

    Have a wonderful day