Chart.js v2 hide dataset labels

chart.jschart.js2

chart.js Problem Overview


I have the following codes to create a graph using Chart.js v2.1.3:

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
	type: 'line',
	data: {
		labels: dates,
		datasets: [{
			label: 'I want to remove this Label',
			data: prices,
			pointRadius: 0,
			borderWidth: 1
		}]
	}
});

The codes look simple, but I cannot remove the label from the graph. I tried a lot of solutions I found online, but most of them use Chart.js v1.x.

How can I remove the dataset labels?

chart.js Solutions


Solution 1 - chart.js

Just set the label and tooltip options like so

...
options: {
    legend: {
    	display: false
    },
  	tooltips: {
    	callbacks: {
      	   label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

Fiddle - http://jsfiddle.net/g19220r6/

Solution 2 - chart.js

As of 2021, the namespace has changed from options.legend to options.plugins.legend. This simple code worked for me -

data{
...
},
options: {
  plugins: {
    legend: {
      display: false
    }
  }
}

Solution 3 - chart.js

add:

Chart.defaults.global.legend.display = false;

in the starting of your script code;

Solution 4 - chart.js

New Solution ChartJS v3.1.1

The above solution is correct for previous versions of chart js prior to v3.1 for v3.1.1 use the following

 ...
 options: {
  plugins:{
   legend: {
    display: false
   }
  }
 }

Solution 5 - chart.js

You can also put the tooltip onto one line by removing the "title":

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

enter image description here

Solution 6 - chart.js

It's just as simple as adding this:

legend: {
    display: false,
}

Or if you want you could use this other option which should also work:

Chart.defaults.global.legend.display = false;``

Solution 7 - chart.js

For those who want to remove the actual axis labels and not just the legend in 2021 (Chart.js v.3.5.1). Note: this also removes the axes.

const chartWrap = document.querySelector('.chart-wrap')
const canvas = document.createElement('canvas')

chartWrap.appendChild(canvas)
const ctx = canvas.getContext('2d')

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Your', 'axis', 'labels'],
        datasets: [
            {
                label: 'Your legend label',
                data: [1, 3, 2],
                backgroundColor: '#54ACEF'
            }
        ]
    },
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: false // Hide legend
        },
        scales: {
            y: {
                display: false // Hide Y axis labels
            },
            x: {
                display: false // Hide X axis labels
            }
        }   
    }
})

<div class="chart-wrap" style="width: 200px; height: 100px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Solution 8 - chart.js

new Chart('idName', {
      type: 'typeChar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });

Solution 9 - chart.js

Replace options with this snippet, will fix for Vanilla JavaScript Developers

options: {
            title: {
                text: 'Hello',
                display: true
            },
            scales: {
                xAxes: [{
                    ticks: {
                        display: false
                    }
                }]
            },
            legend: {
                display: false
            }
        }

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRaptorView Question on Stackoverflow
Solution 1 - chart.jspotatopeelingsView Answer on Stackoverflow
Solution 2 - chart.jsMuhammad ZakariyaView Answer on Stackoverflow
Solution 3 - chart.jsRochanView Answer on Stackoverflow
Solution 4 - chart.jsRex. AView Answer on Stackoverflow
Solution 5 - chart.jsmpenView Answer on Stackoverflow
Solution 6 - chart.jsReynald Ramirez de LunaView Answer on Stackoverflow
Solution 7 - chart.jsLudolfynView Answer on Stackoverflow
Solution 8 - chart.jsJuan Ignacio UrcolaView Answer on Stackoverflow
Solution 9 - chart.jsSajeel HassanView Answer on Stackoverflow