Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ChartJS pie chart with custom legend in table.
<!DOCTYPE html>
<html>
<head>
<title>ChartJS Pie Chart Lengend.</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/solid.min.css" rel="stylesheet"/>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Quicksand');
body {
margin: 50px;
font-family: 'Quicksand', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
}
.row {
margin-bottom: 15px;
}
.hidden {
display: none;
}
.dot {
width: 16px;
height: 16px;
display: inline-block;
border-radius: 16px;
}
tr.bold td {
font-weight: 600;
}
@media print {
@page {
size: A4 portrait;
}
body {
background-color: #fff;
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Programming languages used in this repository.</h4>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<table id="legend" class="table table-sm table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th>Langauge</th>
<th class="text-right">Files</th>
<th class="text-right">%</th>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</div>
<div class="col-md-8 col-sm-8 col-xs-12">
<canvas id="pie-chart" width="100%"></canvas>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script type="text/javascript">
var pie_chart = new Chart(document.getElementById("pie-chart"), {
type: "pie",
data: {
labels: ["HTML", "PHP", "Javascript", "Vue", "Shell"],
datasets: [
{
label: "Programming languages.",
backgroundColor: ["#e34c26" ,"#4F5D95" ,"#f1e05a" ,"#89e051" ,"#2c3e50"],
data: [605, 302, 82, 10, 1]
}
]
},
options: {
title: {
display: false,
text: "Programming languages used in this repository."
},
tooltips: {
enabled: true
},
legend: {
// since you're providing your own legend
display: false
}
}
});
buildLegend(pie_chart.data);
function sum(total, elem)
{
return total + elem;
}
function buildLegend(data)
{
var datasets = data.datasets;
var labels = data.labels;
if (datasets.length) {
var total = datasets[0].data.reduce(sum);
for (var i = 0; i < datasets[0].data.length; ++i) {
var row = [];
row.push('<tr>')
row.push('<td class="text-center"><i class="fa fa-circle" style="color: '+datasets[0].backgroundColor[i]+'"></i></td>');
if (labels[i]) {
var share = Number(datasets[0].data[i]/total*100).toFixed(2);
row.push('<td>'+labels[i]+'</td>');
row.push('<td class="text-right">'+datasets[0].data[i]+'</td>');
row.push('<td class="text-right">'+share+'</td>');
}
row.push('</tr>');
$('table[id=legend]').find('tbody').append(row.join(''));
}
}
var summary = '<tr><th class="text-center">#</th><th>Total</th><th class="text-right">'+total+'</th><th class="text-right">100</th></tr>';
$('table[id=legend]').find('tfoot').append(summary);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.