[Chartjs]-How would i print out HTML Chart.Js Legends using the global parameters

by

1👍

✅

Chartjs provides a function to generate a basic html legend called generateLegend() [more can be found in the docs about it http://www.chartjs.org/docs/latest/configuration/legend.html], the only thing this will bring into the html legend is the legend colour for the item. For font and other stylings you would have to create using css. Or you can override the function and create your own custom html legend using data from your chart.

example:

Chart.defaults.global.defaultFontFamily = "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif";
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.legend.position = 'bottom';
Chart.defaults.global.legend.labels.usePointStyle = true;
Chart.defaults.global.legend.labels.boxWidth = 15;
Chart.defaults.global.legend.labels.padding = 10;
Chart.defaults.global.tooltips.backgroundColor = '#000';

var colors = [
  ['rgba(120, 199, 221, 1)', 'rgba(120, 199, 221, 0.4)'],
  ['rgba(125, 169, 210, 1)', 'rgba(125, 169, 210, 0.4)'],
  ['rgba(162, 108, 136, 1)', 'rgba(162, 108, 136, 0.4)'],
  ['rgba(237, 180, 133, 1)', 'rgba(237, 180, 133, 0.4)'],
  ['rgba(129, 151, 92, 1)', 'rgba(129, 151, 92, 0.4)'],
  ['rgba(99, 122, 152, 1)', 'rgba(99, 122, 152, 0.4)'],
  ['rgba(187, 156, 200, 1)', 'rgba(187, 156, 200, 0.4)'],
  ['rgba(249, 185, 170, 1)', 'rgba(249, 185, 170, 0.4)'],
  ['rgba(162, 76, 80, 1)', 'rgba(162, 76, 80, 0.4)'],
  ['rgba(199, 123, 74, 1)', 'rgba(199, 123, 74, 0.4)'],
  ['rgba(200, 139, 35, 1)', 'rgba(200, 139, 35, 0.4)']
];

var pieColors = [
  colors[0][0],
  colors[1][0],
  colors[2][0],
  colors[3][0],
  colors[4][0],
  colors[5][0],
  colors[6][0],
  colors[7][0],
  colors[8][0],
  colors[9][0],
  colors[10][0]
];

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["CEO, President, Chairman of the Board", "Chief Information Officer, Chief Data Officer, Chief Technology Officer, Chief Architect", "Chief Financial Officer, Chief Operations Officer, Chief Procurement Officer", "Chief Marketing Officer, Chief Commercial Officer, Chief Revenue Officer", "Chief Risk Officer, Chief Compliance Officer, Chief Legal Council", "Other C-Level Titles (Chief Innovation Officer, Chief Strategy Officer, Chief Admin Officer"],
    datasets: [{
      data: [37, 17, 16, 13, 10, 7],
      borderWidth: 2,
      hoverBorderWidth: 10,
      backgroundColor: pieColors,
      hoverBackgroundColor: pieColors,
      hoverBorderColor: pieColors,
      borderColor: pieColors
    }]
  },
  options: {
    legend: {
      display: false
    }
  },

});


var legendDiv = document.getElementById('legend');
legendDiv.innerHTML = (myChart.generateLegend());
#legend ul {
  list-style: none;
}

#legend li span {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin-right: 10px;
  border-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div style="width:75%;">
  <canvas id="myChart"></canvas>
</div>
<div id="legend"></div>

Leave a comment