'ChartJS do not render any legend if the label is falsy

I am using ChartJS 2.4 and I want to predefine lots of settings in the datasets already. But use an empty data array and an undefined label. Now I want to stop ChartJS from rendering the legend which is then shown as "null" or "undefined". Later I am setting a proper label and start to push data to the dataSet and finally call update() on the chart which works fine.

Here is a basic fiddle with this code:

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
});


setTimeout(function(){
  data.datasets[0].label = "The Label"
  data.datasets[0].data.push(10, 20)
    myLineChart.update()
}, 2000)

I have tried to overwrite generateLabels but I had no luck with that. And the setting dateaset.hidden only strikes through the legend if true but not really "hides".

EDIT 1: On the other hand setting options.legend.display to false hides all the legends and for ever, this is also not what I need.

chart.js


Solution 1:[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>

Solution 2:[2]

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
  }
}
}};

Solution 3:[3]

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>

Solution 4:[4]

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
}]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 michele buzzoni
Solution 3 LeeLenalee
Solution 4 ganji

Related Questions