How to hide label for chart.js

Question

I have chart which show 3 types of label

I want to keep two of them and want to hide one Invoice Income Report. How can I hide that one label? I am using chart.js v2

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Invoice Income Report',
      data: bar_chart_data,
      backgroundColor: colors,
      borderWidth: 1
    }, {
      label: 'Below Average',
      backgroundColor: ['rgba(255, 99, 132, 1)']
    }, {
      label: 'Above Average',
      backgroundColor: ['rgba(11, 156, 49, 1)']
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
  }
});

user_14746379 · Answer

In chart.js, You can hide the labels using legend attribute. Add the following code in options of chart.js

legend: {
    display: false
}

According to your code, after adding legend the options will be .....

options: {
    scales: {
        y: {
            beginAtZero: true
        }
    },
    legend: {
        display: false
    }
}

user_2281285 · Answer

Add legend option to options configuration, set display to false:

                , options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    legend: {
                      display: false
                    }
                }

docs3:https://www.chartjs.org/docs/latest/configuration/legend.html docs2:https://www.chartjs.org/docs/2.6.0/configuration/legend.html

user_12492241 · Answer

You can simply make display false.

const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
        display: false,
      },
      title: {
        display: false,
        text: 'Chart.js Line Chart',
      },
    },
  };

How to hide label for chart.js

3 Answers