Okay
  Public Ticket #2055895
Chart.js questions
Closed

Comments

  •  4
    Daniel Lewis started the conversation

    I go back and forth between Google Charts and Chart.js, but Chart.js's layout tends to be a bit more predictable (see my other ticket about Google charts padding issues).

    So I have a couple questions with Chart.js:

    1. How can I get the pie chart to display percentages? I found https://stackoverflow.com/questions/37257034/chart-js-2-0-doughnut-tooltip-percentages about getting the percentages to display in tooltips via callbacks. I know Javascript, so I might see if I can make that work with the plugin.

    2. How can I override Chart.js's style of semi-transparent fills and opaque borders (without defining every axis color separately in CSS)? I want opaque fills with no transparency. The color differences make things seem more complicated.

     

  •  2,572
    Aleksandar replied

    Hi again Daniel.

    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.

    As for adding percentage, I am not sure what callbacks you would need to use for Chart.js, but this is what works 100% in Hoghcharts:

    <script type="text/javascript">
    jQuery(window).load(function(){
        if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
        wpDataChartsCallbacks[8] = function(obj){
            obj.options.yAxis = {
               labels: {
                format: '{value} %'
            }
        }
       }
    });
    </script>
    [wpdatachart id=8]
    

    It's probably similar, but I haven't dealt with this myself, so I cannot say for sure.

    The second question is also a customization, for which unfortunately I cannot even give you a hint since I didn't do that myself.

    Thank you for your understanding.

    Best regards.

    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