[Chartjs]-How to add label for ChartJs Legend

by

1👍

✅

You can use html to create your custom legend. Here is an example of how to creating a custom legend with custom title(and custom user interface). 

function legendClickCallback(event) {
  event = event || window.event;

  var target = event.target || event.srcElement;
  while (target.nodeName !== 'LI') {
      target = target.parentElement;
  }
  var parent = target.parentElement;
  var chartId = parseInt(parent.classList[0].split("-")[0], 10);
  var chart = Chart.instances[chartId];
  var index = Array.prototype.slice.call(parent.children).indexOf(target);
  var meta = chart.getDatasetMeta(index);

  if (meta.hidden === null) {
    meta.hidden = !chart.data.datasets[index].hidden;
    target.classList.add('hidden');
  } else {
    target.classList.remove('hidden');
    meta.hidden = null;
  }
  chart.update();
}

var ctx = document.getElementById("myChart");
var myLegendContainer = document.getElementById("myChartLegend");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["values #1", "values #2"],
    datasets: [
      {
        label: "One",
        backgroundColor: "red",
        data: [26,36]
      },
      {
        label: "Two",
        backgroundColor: "blue",
        data: [34, 40]
      }

    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    }
  }
});

myLegendContainer.innerHTML = myChart.generateLegend();
var legendItems = myLegendContainer.getElementsByTagName('li');
for (var i = 0; i < legendItems.length; i += 1) {
  legendItems[i].addEventListener("click", legendClickCallback, false);
}
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
[class="0-legend"] {
  cursor: pointer;
  list-style: none;
  padding-left: 0;
}
[class="0-legend"] li {
  display: inline-block;
  padding: 0 5px;
}
[class="0-legend"] li.hidden {
  text-decoration: line-through;
}
[class="0-legend"] li span {
  border-radius: 5px;
  display: inline-block;
  height: 10px;
  margin-right: 10px;
  width: 10px;
}
.legend-box{
  border-color: gray;
  border-style: dashed;
  margin-top: 25px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>


<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
      <div class='legend-box'>
        <span>Chart legend</span>
        <div id="myChartLegend"></div>        
      </div>
    </div>
  </body>
</html>

I used the code of this example to create above example

1👍

You can override default legend option to generate your own legends. With this approach, however, you cannot style the label you are adding on top of the legends.

P.S: I’m using same example used by user pooyan.

var ctx = document.getElementById("myChart");
var myLegendContainer = document.getElementById("legends");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["values #1", "values #2"],
    datasets: [
      {
        label: "One",
        backgroundColor: "red",
        data: [26,36]
      },
      {
        label: "Two",
        backgroundColor: "blue",
        data: [34, 40]
      }

    ]
  },
  options: {
    legend: {
    	position: 'left',
    	labels : {
      	generateLabels: function(chart){
          var data = chart.data;
          var legends = Array.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {
            return {
              text: dataset.label,
              fillStyle: (!Array.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
              hidden: !chart.isDatasetVisible(i),
              lineCap: dataset.borderCapStyle,
              lineDash: dataset.borderDash,
              lineDashOffset: dataset.borderDashOffset,
              lineJoin: dataset.borderJoinStyle,
              lineWidth: dataset.borderWidth,
              strokeStyle: dataset.borderColor,
              pointStyle: dataset.pointStyle,

              // Below is extra data used for toggling the datasets
              datasetIndex: i
            };
          }, this) : [];
          var title = {
              text: 'My Cool Label',
              strokeStyle: 'transparent',
              fillStyle: 'transparent',
              lineWidth: 0
            };
          legends.unshift(title);
          return legends;
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});
<script src="https://npmcdn.com/chart.js@2.7.2/dist/Chart.bundle.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

1👍

you can do that by using fillText() above the legend after having drawn the chart.

By example, use the plugin afterDatasetsDraw (or another) and draw the title up to the position of first element of the legend (use legendHitBoxes[0]).

In the plugin section :

return {afterDatasetsDraw: function(chartInstance, easing) {
                        //onProgress: function (animation) {
                            //var chartInstance = this.chart;
                            var ctx = chartInstance.ctx;
                            ctx.textAlign = 'center';
                           // ctx.fillStyle = "rgba(255, 243, 243)";
                            ctx.textBaseline = 'middle';

                            // Ajout d'un titre de légende
                            var titreLegendeX = chartInstance.legend.legendHitBoxes[0].left + 50;
                            var titreLegendeY = chartInstance.legend.legendHitBoxes[0].top-20;
                            ctx.fillStyle = "#000000";
                            ctx.font = "bold 12px verdana, sans-serif";
                            ctx.fillText("Titre de légende", titreLegendeX, titreLegendeY);

Example here
To adapt for donut chart

Leave a comment