Okay
  Public Ticket #2678413
Changing the color of data labels on highcharts donut chart
Closed

Comments

  • mahmood started the conversation

    I am attempting to change the color of the data labels on the Highcharts donut chart. However, none of the Highcharts documentation nor wpDataTables documentation list how to do this.

    Specifically, I just want all of the datalabels to be black text. But, some of them are white and one (overlapping a yellow portion of the chart) shows as black.

    Note that setting colors in the datalabels object does not alter the colors at all. I am going off of these examples:

    https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-color/

    https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/series-datalabels

  •  2,507
    Aleksandar replied

    Hello mahmood

    Thank you for your purchase.

    That is default behavior of charts engine, but if you need some custom solution you can check in our documentation about wpDataCharts callbacks

    • Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. wpDataChart callbacks allow adding options that are available in Google Charts APIHighcharts API and Chart.js API
    • All necessary resources are available in charts engines API (depends on which one you use). Every engine has a different approach to chart settings. In wpDataChart callbacks you have to adopt those settings to the wpDataChart object (you can take a look at examples for each engine in our documentation, and also in Support help center). Huge number of examples for any area of programming can be found on stackoverflow.com (typing your problem in google and at the end add "site: stackoverflow.com" and google will search only that website). Also, a lot of examples of charts, chart settings and customization can be found on jsffidle.net (typing in google for example "line chart highcharts jsffidle")
    • Please note that using hooks or wpdatatable and wpDataChart callbacks requires certain level of programming skills and included support refers only to advice.

    You can see how you can remove data labels and add a legend on this page in our FAQ section, for example. 

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

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

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  •  1
    Michael replied

    Hi Aleksandar

    I faced the problem too. In the previous version (before 3.4) the callbacks for the charts worked well. Now they don't.

    I saw the same issues in your examples in your documentation.

    BR

    Michael

  • mahmood replied

    The right way to do this is using "color: black" in the dataLabels object.

    jQuery(window).on('load',function(){
        if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
        wpDataChartsCallbacks[1] = function(obj){
            obj.options.plotOptions.pie = {
                
                colors: [
                        '#50B432',
                        '#09a94e',
                        '#fdff00',
                        '#e74c3c'
                ],
                dataLabels: {
                        format: '{point.percentage:.1f} %',
                        style: {
                        fontSize: '1.5em'
                        },
                        distance: -50,
                        color: 'black',

               }
            }
        }
    });

  •  2,507
    Aleksandar replied

    Hello again mahmood and Michael

    wpDataTables v3.4.1 has issues with callbacks.

    Please replace the files in these locations:

    wp-content/plugins/wpdatatables/assets/js/wpdatatables/wdt.chartsRender.js

    wp-content/plugins/wpdatatables/assets/js/wpdatatables/wdt.chartsRender.min.js

    With the files attached to my response. Then delete cache from your website and browser, and the callbacks that worked previously will work again.

    Sorry for the inconvenience.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

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

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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

  • Eva replied

    Honestly my frustration has reached its limit

  •  2,507
    Aleksandar replied

    Hello Eliana

    I'm really sorry to hear about your frustration. Modifying this would only be possible by applying wpDataCharts callbacks, which require a certain level of programming skills. The included support doesn't cover writing custom code, so you would need to change the look of the letters through trial and error.

    I can't find your email in our database, and support for something like this cannot be offered for wpDataTables Lite, even if our developers had time to play around with this.

    Something similar is covered in this stack overflow thread. Removing the stroke may not be necessary, since it's already black - on a black background, you only need to change the color of the label, as shown here.

    I just managed to make our FAQ example (Highcharts) look like this:

    7519980942.png

    And the callback used here (modified, not the one you see on the FAQ page) is 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: {
                        format: '{point.name}{point.percentage:.1f} %',
                        color: 'white'
               }
            }
        }
    });
    </script>
    

    The background was changed with custom CSS directly on the page (originally it's white), but the look of the chart you see in the screenshot above is configured with the callback you see. wpDataChartsCallbacks[15] refers to the [wpDataChart id=15], so you should only change that. A simplified callback would most likely be (but I haven't tested this):

    <script type="text/javascript">
    jQuery(window).on('load',function(){
        if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
        wpDataChartsCallbacks[15] = function(obj){
                        dataLabels: {
                            color: 'white'
            }
        }
    });
    </script>

    I hope this helps.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

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

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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