How to create custom legends in chart js ???

  HTML & CSS, Javascript

Let’s try this code….

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Charts js</title>
</head>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<style>
#legend{
height:auto;

}

#legend{
width:100%;
}

#legend> ul{
padding: 0;
text-align: right;
}


#legend {
width:100%;

}
#legend li {
cursor: pointer;
margin: 4px 3px;
display: inline-table;
}
#legend li span {
position: relative;
padding: 3px 10px;
border-radius: 13px;
color:#000;
z-index: 2;
font-size: 13px;
}

#legend{
height: auto;
overflow-y: auto;
}

.donut-area{
height:calc(100% - 62px)
}


</style>

<body>


<canvas id="myChart" style="width:100%;"></canvas>
<div id="legend"></div>





<script>
var configd = {
type: 'line',
data: {
            labels: ["January", "February", "March", "April", "May", "June", "July","August"],
            datasets: [
                
                {
                label: "Microsoft Stock Report",
                backgroundColor: 'rgba(0, 0, 0,0)',
                borderColor: '#7cb4f0',
                data: [2, 13, 5, 14, 30, 30, 45,30],
             },

             {
             label: "Apple Stock Report",
                backgroundColor: 'rgba(0, 0, 0,0)',
                borderColor: '#95ed6c',
                data: [0, 0, 5, 15, 10, 1, 5,2],
                },
                {
                label: "Google Stock Report",
                backgroundColor: 'rgba(0, 0, 0,0)',
                borderColor: '#434348',
                data: [1, 2, 10, 5, 10, 13, 15,20],
},

            ]    },


options: {
responsive: true,
legend: {
display: false
},
legendCallback: function (chart) {

var text = [];
text.push('<ul class="' + chart.id + '-legend">');
for (var i = 0; i < chart.data.datasets.length; i++) {

text.push('<li><span style="background:' + chart.data.datasets[i].borderColor + ';width:1px;height:1px "></span><span id="legend-' + i + '-item" style="" onclick="updateDataset(event, ' + '\'' + i + '\'' + ')">');

if (chart.data.datasets[i].label) {
text.push(chart.data.datasets[i].label);
}
text.push('</span></li>');
}
text.push('</ul>');
return text.join("");
},
elements: {
                    line: {
                        tension: 0,
                    }
                },


}
};

var ctxd = document.getElementById('myChart').getContext('2d');

window.myLineChart = new Chart(ctxd, configd);
$("#legend").html(window.myLineChart.generateLegend());

// Show/hide chart by click legend
updateDataset = function (e, datasetIndex) {
var index = datasetIndex;
var ci = e.view.myLineChart;
var meta = ci.getDatasetMeta(0);
var result= (meta.data[datasetIndex].hidden == true) ? false : true;
if(result==true)
{
meta.data[datasetIndex].hidden = true;
$('#' + e.path[0].id).css("text-decoration", "line-through");
}else{
$('#' + e.path[0].id).css("text-decoration","");
meta.data[datasetIndex].hidden = false;
}

ci.update();
};
</script>
</body>
</html>
Spread the Code

5
Leave a Reply

avatar
3 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
codeerrornamnnTeoanil naikprem karthi Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
namnn
Guest
namnn

ci.update() -> not working

Teo
Guest
Teo

Legend event doesn’t work

prem karthi
Member

if it possible to create multiple charts in single page????

anil naik
Member

yes