Label and Caption on Chartjs Doughnut Charts

Asked

Viewed 2,381 times

-1

Would anyone know how to include Caption and Label above the chart in this type below? http://www.chartjs.org/docs/#doughnut-pie-Chart

I created mine, but I’ve already entered all the options of the documentation and the label only appears when I hover over it.

chartjs

  • The syntax is: myChart.generateLegend();

2 answers

0

With any instance of 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>
<script type="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 caption HTML/template, so you should pass, via options for Chart the property legendTemplate with the respective template.

  • The caption wouldn’t even be so much the problem, but what I need is to get the label above the chart. Does it have like?

0

Try using the '.generateLegend()' method to generate the legend. This method returns an HTML string with the caption according to the model passed in the graphic option 'legendTemplate'.

Browser other questions tagged chartjs

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