CODEWITHSUNDEEP
javascriptchart.js
arnold_p
arnold_p

Reputation: 505

Give '%' on Bar Chart Datalabel Chartjs

I am working with chartjs and I am wondering how to give '%' on datalabel of bar chart. My code like below:

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); ?>
}

I tried to put string '%' like this data: <?php echo json_encode($myData); ?> + '%' but it returned nothing but a blank page. So anyone can help me to fix this?

Upvotes: 0

Views: 1910

Answers (3)

arnold_p
arnold_p

Reputation: 505

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

Upvotes: 2

Maths RkBala
Maths RkBala

Reputation: 2195

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

Upvotes: 3

Bruno
Bruno

Reputation: 189

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

Upvotes: -1

Related Questions