[Chartjs]-ChartJS do not render any legend if the label is falsy

by

1👍

✅

Let us create a plugin that, at the start of every update, decides whether to display the legend or not based on whether the label of the first dataset is (respectively) defined or not. The autoDisplayLegend chart option enables the plugin, if set to true.

A working fiddle is here. The code is also available below.

var autoDisplayLegendPlugin = {
  // Called at start of update.
  beforeUpdate: function(chartInstance) {
    if (chartInstance.options.autoDisplayLegend) {
      // The first (and, assuming, only) dataset.
      var dataset = chartInstance.data.datasets[0];
      if (dataset.label)
        chartInstance.options.legend.display = true;
      else
        chartInstance.options.legend.display = false;
    }
  }
};

Chart.pluginService.register(autoDisplayLegendPlugin);

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    fill: false,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 5,
    pointHitRadius: 10,
    data: [],
  }]
};

var myLineChart = new Chart("myChart", {
  type: "line",
  data: data,
  options: {
    // Option to auto display the legend.
    autoDisplayLegend: true
  }
});


setTimeout(function() {
  data.datasets[0].label = "The Label"
  data.datasets[0].data.push(10, 20)
  myLineChart.update()
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>

0👍

if you want, you can delete the dataset so the legend will not display:

var autoDisplayLegendPlugin = {

beforeUpdate: function(chartInstance) {

if (chartInstance.canvas.id == 'chart6') {
  // The first (and, assuming, only) dataset.
  var dataset = chartInstance.data.datasets[2];
  if (dataset.data.length != 0){ // delete only if there is no data in dataset
    console.log(chartInstance);
    chartInstance.options.legend.display = true;

  }
  else{
    chartInstance.options.legend.display = true;
    chartInstance.data.datasets.pop(); // if is the last datasets you don't want the legend to appear
  }
}
}};

0👍

You can filter the labels and use that to remove a falsy text

const data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    fill: false,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 5,
    pointHitRadius: 10,
    data: [],
  }]
};

const myLineChart = new Chart("myChart", {
  type: "line",
  data: data,
  options: {
    plugins: {
      legend: {
        labels: {
          filter: (legendItem) => (!!legendItem.text)
        }
      }
    }
  }
});


setTimeout(function() {
  data.datasets[0].label = "The Label"
  data.datasets[0].data.push(10, 20)
  myLineChart.update()
}, 2000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="myChart" width="400" height="250"></canvas>

-1👍

The main reason is ,it’s showing

undefined

because you haven’t defined the label property for your datasets.

 datasets: [{ 
  data: [1,2,6,3,8,9,5],
  label:'your label',
  borderColor: "red",
  fill: false
}]

Leave a comment