Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove "label" in chart.js

I'm using Chart.js v2.7.2 and want to remove the "label" field. Leaving it off returns "undefined" and the various options I've tried have done nothing. Anyone have new insight on this? Legend, title, etc all fail to remove it.

let thisChart = new Chart(gov_chart, {
        type: 'horizontalBar',
        data: {
            label: 'I want to remove this',
            labels: [data1, data2],
            datasets: [{
                backgroundColor: ['rgb(240,61,74)', 'rgb(0, 156, 255)'],
                data: [data1.count, data2.count],
                }]
            },
        options: {
            scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero: true
                        }
                    }]
                }
            },
            legend: {
                display: false
            },
            title: {
                display: false
            },
            tooltips: {
                callbacks: {
                    label: function(tooltipItem) {
                        return tooltipItem.yLabel;
                    }
                }
            }
        });
like image 431
Alicia Avatar asked Sep 22 '18 00:09

Alicia


People also ask

How to remove label on chart JS?

You can hide datasets labels in Chart. js by applying 'display: false' into legend option.

How do you delete a legend in ChartJS?

To remove legend on charts with Chart. js v2 and JavaScript, we can set the options. legend to false . const chart1 = new Chart(canvas, { type: "pie", data: data, options: { legend: { display: false, }, tooltips: { enabled: false, }, }, });

What is legend in ChartJS?

The chart legend displays data about the datasets that are appearing on the chart.

How do I change the label color in ChartJS?

With ChartJS 3, you can change the color of the labels by setting the scales. x. ticks. color and scales.


2 Answers

Note, the accepted answer is outdated for 3.x. To remove the legend you now have to specify the plugin. https://www.chartjs.org/docs/latest/configuration/legend.html

eg

var chart = new Chart(ctx, {
   type: 'bar',
   data: data,
   options: {
      plugins: {
         legend: {
            display: false
         }
      }
    }
});
like image 118
user2662680 Avatar answered Oct 19 '22 17:10

user2662680


The label should be inside datasets such as

type: 'horizontalBar',
data: {  
  labels: [data1, data2],
  datasets: [{
    label: 'put it here', // => here
    backgroundColor: ['rgb(240,61,74)', 'rgb(0, 156, 255)'],
    data: [data1.count, data2.count],
  }]
},

so you won't get undefined

Updated: if you don't want to see it, put legend configuration inside the options. Apparently, I saw that your legend is outside options object.

options: {        
  legend: {
    display: false
  }
}
like image 24
deerawan Avatar answered Oct 19 '22 17:10

deerawan