How to display "%" sign on mouse hover in Pie-Chart

chart.js, charts, javascript

Solution

You can edit what is displayed in your tooltip with the `callbacks.label` method in your chart options, and then simply add a "%" to the default string using :

- `tooltipItems` -- See documentation for more information (scroll up a bit to "Tooltip Item Interface")

- `data` -- Where the datasets and labels are stored.

var ctx = document.getElementById("canvas");
var data = {
    datasets: [{
        data: [93, 4, 3],
        backgroundColor: [
            "#455C73",
            "#BDC3C7",
            "#26B99A",
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Rented",
        "Vacant",
        "Unavailable",
    ]
};
var pieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItems, data) {
                    return data.labels[tooltipItems.index] + 
                    " : " + 
                    data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] +
                    ' %';
                }
            }
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="canvas" height="150"></canvas>

Problem

I am drawing graph on UI using ChartJS 2.0. And I am able to render a Pie Chart. But I want the mouse-hover to show the data along with a "%" sign. How can I append % So if on mouse hover I am getting `Rented: 93` I would like to see `Rented: 93 %`. Kindly guide me. Below is what I have now: ``` var sixthSubViewModel = Backbone.View.extend({ template: _.template($('#myChart6-template').html()), render: function() { $(this.el).html(this.template()); var ctx = this.$el.find('#pieChart')[0]; var data = { datasets: [{ data: this.model.attributes.currMonthOccAvailVac, backgroundColor: [ "#455C73", "#BDC3C7", "#26B99A", ], label: 'My dataset' // for legend }], labels: [ "Rented", "Vacant", "Unavailable", ] }; var pieChart = new Chart(ctx, { type: 'pie', data: data }); }, initialize: function(){ this.render(); } }); ``` Understanding: I understand that currently hover takes the `label` and adds a `colon` and then adds `data` to it. So if `label = Rented`, `Data = 93` I will see something like `Rented: 93` on mouse-hover. How can I change text of mouse-hover to display `Rented: 93%`. Below is the image of what I have till now on mouse-hover. I understand that I need to add one `"options"` in the pie chart. But I am not sure how to do that. Please help me.

Original source