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

Katharina

Simply add legend property and make display false. I added working example. – Southerner

Answer 1

To hide the labels on version 4.2.1 of chart.js use this:

// Example chart.
const chart = new Chart(id, {
        type: 'bar', // Chart type.
        data: data, // Your data.

        options: {
            // Add plugins to options.
            plugins: {
                legend: {
                    display: false // This hides all text in the legend and also the labels.
                }
            }
            // add your scales or other options.
        }
    });

For more info use the doc: https://www.chartjs.org/docs/latest/configuration/legend.html

Caracole

maybe you meant "false" – Utricle

Answer 2

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

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

Consider the docs v3 or docs v2.

Deckhouse

either the scales or legend wont work in this current config. This is V2 and V3 syntax combined – Define

For me it works fine. I use wkhpdf to convert html to pdf and plugins don't work for me, so this is the perfect solution. – Zeus

Answer 3

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

Southerner

Answer 4

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

Sleek

@BilalArshad show your complete code or make a fiddle so i can help you in a better way. – Sleek

either the scales or legend wont work in this current config. This is V2 and V3 syntax combined – Define

Isn't this a duplicate to this answer? – Zeus

Answer 5

For react-chartjs-2 v5, I've done

        plugins: {
          legend: {
            display: false,
          },
        },

plugins is necessary for it to work.

Toadflax