ChartJS pie chart or pie display percentage

Navigation
1

Using the chartjs lib ( link ) Is there any simple way to make a pie chart, display the percentage of each color, or at least allow the insertion of the character "%" after displaying the number in the tooltip, because in that 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 you hover 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 transform this value into a percentage, but the lack of the character (%) will make it harder for the user to understand whether that is a percentage. Is there any solution in this case? Or you can suggest me some other free lib, which does + - the same as this, but without these "limitations."

    
asked by anonymous 19.04.2016 / 06:20

1 answer

1

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

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

JavaScript could look like this: 

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

jsFiddle: link

    
19.04.2016 / 06:29
There are no compatible devices when posting to Google Play @ApplicationScoped life cycle on ear