How can I hide dataset labels in Chart.js v2?

Question

I have the following code 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 code looks 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?

score 340 · Accepted Answer · answered May 13 '16 at 09:04

340

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/

answered May 13 '16 at 09:04

potatopeelings

40,709
7
95
119

works like charm, thanks. by the way, how to change the gradient color of the line chart? – Raptor May 13 '16 at 10:50
1

You mean, how to use a gradient as the borderColor / backgroundColor. Just create one on the context and use that when initializing - see http://jsfiddle.net/g9h6gtvx/ – potatopeelings May 14 '16 at 02:14
1

What if I want to use it on one dataset but not on the other one – Nick Alexander Apr 16 '18 at 11:57
It works! just one question, where did you find all these options? – fangzhzh Jan 29 '20 at 01:00
5

Unfortunately, this no longer works in the latest v2.9.3. http://jsfiddle.net/hwtysf64/ – Jeremy L. Nov 16 '20 at 07:08
2

This works for me in 3.4.1, by setting `options.plugins.tooltip.callbacks.label` to the function. – Evan Knowles Jul 20 '21 at 08:55
1

this didn't work for me . adding the code within plugins works not in options – mluser Aug 24 '21 at 10:25
Note that in Chart JS 3 it's tooltip, not tooltips. This tripped me up for a minute. – Major Major Dec 24 '21 at 03:08

Zakariya Qureshi · Answer 2 · 2022-10-20T11:31:09.613

192

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

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

Documentation reference

edited Oct 20 '22 at 11:31

answered Apr 12 '21 at 09:29

Zakariya Qureshi

2,084
2
8
9

1

```js options: { legend: { display: false } } ``` – wajdi_jurry Oct 19 '22 at 10:49

score 51 · Answer 3 · answered Apr 21 '17 at 10:59

51

add:

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

in the starting of your script code;

answered Apr 21 '17 at 10:59

Rochan

1,412
1
14
17

Simple and works perfectly. I noticed the accepted answer was breaking some things. – stickdeodorant Nov 07 '19 at 21:34
1

In React, I did this `import { Chart } from "react-chartjs-2"; Chart.defaults.global.legend.display = false; ` – alfonso Sep 08 '20 at 22:38

score 29 · Answer 4 · answered Apr 22 '21 at 18:10

29

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

answered Apr 22 '21 at 18:10

Rex. A

379
4
7

This also work in v4.2.1 – RJ.Hwang Apr 13 '23 at 02:25

Ludolfyn · Answer 5 · 2021-11-19T20:12:17.200

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>

This does not remove the axis labels but the entire axes togehter with the grid — LeeLenalee, Oct 29 '21 at 13:39
Oh dang, you're right @LeeLenalee. I should probably rephrase. Thanks for the comment :) — Ludolfyn, Nov 03 '21 at 20:38

score 13 · Answer 6 · answered Jan 01 '18 at 23:39

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

score 13 · Answer 7 · edited Apr 03 '21 at 19:09

13

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

edited Apr 03 '21 at 19:09

Jasper

11,590
6
38
55

answered May 24 '19 at 13:37

Reynald Ramirez de Luna

339
3
11

2

options: { legend: { display: false, }} It helps to write which block to put it in (this is basically the problem with the documentation) – Normajean Jul 31 '20 at 20:08

jurcola · Answer 8 · 2019-10-04T18:01:54.720

8

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

edited Oct 04 '19 at 18:01

answered Oct 04 '19 at 17:54

jurcola

359
4
7

5

Hi, welcome to SO. consider adding a brief explanation next to the code – bagerard Oct 04 '19 at 18:12

score 3 · Answer 9 · answered Jan 18 '21 at 11:58

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

How can I hide dataset labels in Chart.js v2?

9 Answers9

New Solution ChartJS v3.1.1

Linked

Related