Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
ChartJS pie chart with custom legend in table.
<!DOCTYPE html>
<title>ChartJS Pie Chart Lengend.</title>
<link href="" rel="stylesheet"/>
<!-- <link href="" rel="stylesheet"/> -->
<link href="" rel="stylesheet"/>
<link href="" rel="stylesheet"/>
<style type="text/css">
@import url('');
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;
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Programming languages used in this repository.</h4>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<table id="legend" class="table table-sm table-hover">
<th class="text-center">#</th>
<th class="text-right">Files</th>
<th class="text-right">%</th>
<div class="col-md-8 col-sm-8 col-xs-12">
<canvas id="pie-chart" width="100%"></canvas>
<script src=""></script>
<script src=""></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
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('<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 class="text-right">'+datasets[0].data[i]+'</td>');
row.push('<td class="text-right">'+share+'</td>');
var summary = '<tr><th class="text-center">#</th><th>Total</th><th class="text-right">'+total+'</th><th class="text-right">100</th></tr>';
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.