Chartjs pie chart or pizza display percentage

Asked

Viewed 2,487 times

1

Using the lib Chartjs(http://www.chartjs.org/) There is some simple way to make a chart of type "pie", display the percentage of each color, or at least allow the insertion of the character "%" after displaying the number in the "tooltip", because in this case, I can calculate the percentages before rendering the graphics.

Follow the code used so far:

    var data = [
        {
            value: 83,
            color: "#2DB45C",
            highlight: "#FF5A5E",
            label: "Masculino"
        },
        {
            value: 181,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Feminino"
        }   
    ];

 var pie = new Chart(document.getElementById("pie-chart").getContext("2d")).Pie(data, {});

When passing the mouse, in the area of each color, it displays the number passed in the "value" parameter, in the "configuration" array. As I mentioned, I can easily turn this value into a percentage, but the lack of character (%) will make it harder for the user to understand whether that is a percentage. Is there any solution in this case? Or can you suggest me some other free lib, that does +- the same as this, but without these "limitations".

chartjs

1 answer

2


You can switch to the chart constructor function a change to the way the Tooltip content is generated. This is documented here, and in practice is to pass a string to be interpreted as JS. In this case I simply concatenated the value with the string "%":

tooltipTemplate: '<%= value + "%" %>'

Javascript could be like this:

var el = document.getElementById("pie-chart").getContext("2d");
var pie = new Chart(el).Pie(data, {
  tooltipTemplate: '<%= value + "%" %>'
});

jsFiddle: http://jsfiddle.net/m2brxya8/

Browser other questions tagged chartjs

You are not signed in. Login or sign up in order to post.