Label and Legend on Charts Chart Chart Donuts Charts

Navigation
0

Would anyone know how to include Label and Label above the graphic in this type below? link

I have created my own, but I have already inserted all the options in the documentation and the label only appears when I hover over.

    
asked by anonymous 29.01.2016 / 11:30

2 answers

0

With an instance of any Chart, just invoke the method .generateLegend() : 

<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="mychart"></canvas>
<div id="legenda"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script><scripttype="text/javascript">
var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
];

var ctx = document.getElementById("mychart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(data);
// Legenda
document.getElementById('legenda').innerHTML = myPieChart.generateLegend();
</script>
</body>
</html>

Most likely you will also want to change the HTML / caption template, so you should pass options to the chart the legendTemplate property with its template.

    
29.01.2016 / 12:15
0

Try to use the '.generateLegend ()' method to generate the caption. This method returns an HTML string with the caption according to the template passed in the 'legendTemplate' chart option.

    
29.01.2016 / 12:29
Icon and Text in ActionBar menu Capture part of a string within a couple of characters using regex