Okay
  Public Ticket #2185820
How do I display data labels above a series?
Closed

Comments

  • Peter McKenzie started the conversation

    I'd like to place data labels above my column chart columns in Chart.js. I note it is not an option among the standard options in the plugin. I read your FAQ https://wpdatatables.com/faqmd/remove-datalabels-add-legend-pie-charthighcharts/ about using the wpDataChartsCallbacks[chart_id] feature. 

    I tried looking at the feature and the Charts.js documentation but it wasn't clear to me on how to add data labels this way. I managed to paste the example code which worked but I don't know how to apply the documentation option using that method... This is what I found

    https://www.chartjs.org/docs/latest/axes/radial/linear.html#point-label-options

    Could you give me a small code snippet showing how to add data labels? 

    I've made this question public because I think a lot of other customers would benefit from this. It is quite common to show data labels in charts and I suggest you include the feature in future releases as it really helps with chart readability.

    Thanks!

  •  2,572
    Aleksandar replied

    Hello Peter.

    Like you mentioned, that is the default behavior of the chart engine, but you should be able to add the labels using our 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.

    By looking at their APIs a bit, I can point you to stick with pointLabels. This doesn't work, but I hope it will point you in the right direction:

    <script type="text/javascript">
    jQuery(window).load(function(){
        if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
        wpDataChartsCallbacks[2] = function(obj){
            obj.options.options.scales.yAxes[0].pointLabels = {
                show: true,
                fontSize: 20
            }
        }
    });
    </script>
    

    I believe you're looking for something like this, so please check Stack Overflow, and other resources.

    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