mtvbrianking/pie-chart-custom-legend.html

## pie-chart-custom-legend.html
<!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>
	<!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>