Chartjs-Give '%' on Bar Chart Datalabel Chartjs

by

3👍

You can setting the tooltip in the following way:

data: {
    datasets: [{
        label: 'My Label',
        data: <?php echo json_encode($myData); ?> // contains number like: 77.43, 78.22, etc
        datalabels: {
            align: 'end',
            anchor: 'end'
        }
    }],

    labels: <?php echo json_encode($myLabel); ?>
},
options: {            
    tooltips: {
        callbacks: {
            label: function(tooltipItems, data) {
                return data.datasets[tooltipItems.datasetIndex].label +': ' + tooltipItems.yLabel + ' %';
            }
        }
    }
}

Reference : http://www.chartjs.org/docs/latest/configuration/tooltip.html

1👍

So, I found the solution on Chartjs Official Github Page. I just need to put

formatter: function (value) {
    return value + "%";
}

inside datalabels

It acts similar with callback in yAxes option.

See this link

-1👍

add quotes around php code and end with a comma: data: "<?...?>",

Leave a comment