Removing legend on charts with chart.js v2

Question

I'm making a homepage using, Bootstrap, JQuery and Chart.js (v2). I had my implementation working using v1, but recently just got into Bower and downloaded v2 using that.

I'm making a grid of 4 columns each containing a pie chart, however the scaling in v2 is sort of confusing for me to get working. I want the charts to be responsive so they scale properly with the smaller devices such as tablets and smartphones, and one of my problems is getting rid of the legend of the charts as well as the hover information when hovering the mouse over the sections of my chart.

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

If I remove the empty "labels" field the chart doesn't work anymore. And by the looks of it there is a small spacing at the top of the chart which could indicate that the headers are written, but they are just empty strings.

Does anyone have an idea of how to remove the legend, and the hover description? I simply can't get my head around how this is used

I will get my hands around a jsfiddle as soon as I get time!

EDIT: Link to the docs: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

score 333 · Accepted Answer · edited May 17 '22 at 02:33

333

From chart.js version 2.x backwards:

The options object can be added to the chart when the new Chart object is created.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});

edited May 17 '22 at 02:33

Eddy

3,623
37
44

answered Jul 05 '16 at 21:13

BrightIntelDusk

4,577
2
25
34

2

Thanks a lot, i was using react and this hwo to do in react way.. – Newton Sheikh May 10 '19 at 09:20
Be careful there is also global property that can be accessed within object. This one set it for all charts instead just one. – hybaken Oct 28 '20 at 09:58
29

Chart.js v3 has legend configuration under `options.plugins.legend.display` now. https://www.chartjs.org/docs/latest/configuration/legend.html – ppak10 Apr 19 '21 at 15:50
I think this is not a good approach. bcz this yaxes and xaxes and other stuff squeezing – arslan Aug 15 '21 at 08:02

score 105 · Answer 2 · edited May 17 '22 at 02:32

105

From chart.js version 3.x onwards:

legend, title and tooltip namespaces are moved from options to options.plugins.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
        plugins: {
            legend: {
                display: false
            },
        }
    }
});

edited May 17 '22 at 02:32

Eddy

3,623
37
44

answered Jun 09 '21 at 22:29

Ishan Varshney

2,933
2
9
11

3

After trying 20 different things, which did not work. As of Sep 2021, this works. – Kjensen Sep 20 '21 at 13:45
As of 2023, for anyone using ChartJS v3.x or v4.x, this is the correct answer! FWIW if there is a highly rated answer on SO about ChartJS that involves an options setting, but it doesn't seem to work for you, then as a first port of call try nesting that setting inside options: { **plugins**: {},}. This may fix your issue (it has for me on several occasions!) – KingRanTheMan Mar 01 '23 at 10:56

cmlonder · Answer 3 · 2020-09-07T10:35:52.157

49

You can change default options by using Chart.defaults.global in your javascript file. So you want to change legend and tooltip options.

Remove legend

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

Remove Tooltip

Chart.defaults.global.tooltips.enabled = false;

Here is a working fiddler.

edited Sep 07 '20 at 10:35

answered Apr 20 '16 at 18:14

cmlonder

2,370
23
35

Cool. I didn't how to use those functions as I didn't know that I could just write those commands in my Javascript. – Zeliax Apr 22 '16 at 06:54

score 9 · Answer 4 · answered Oct 26 '21 at 10:20

9

Modifying Ishan's answer

If you are using react like me,

const data = {
...
}

const options = {
  plugins: {
    legend: {
      display: false,
    },
  },
};


<Bar data={data} options={options} />

answered Oct 26 '21 at 10:20

Joshua Folorunsho

177
1
8

score 3 · Answer 5 · answered Feb 14 '22 at 04:04

3

For me this didn't work:

legend: { display: false }

But this works great, thank you.

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

answered Feb 14 '22 at 04:04

Kamishiraishi

53
8

score 1 · Answer 6 · edited Jun 05 '23 at 15:55

If you are using chartjs version 2.x Then adding simply:

legend: {
  display: false,
},

But if you're using chart.js version 3.x or above, then all these properties have been moved into elements so simply add over there

elements: {
  line: {
    borderWidth: 0.4,
  },
  point: {
    radius: 0,
    hitRadius: 10,
    hoverRadius: 4,
    hoverBorderWidth: 3,
  },
  legend: {
    display: false,
  }
},

score 0 · Answer 7 · answered Sep 06 '19 at 11:39

0

You simply need to add that line legend: { display: false }

answered Sep 06 '19 at 11:39

Navy

25
1

16

how is this answer different form other answers? – Shanteshwar Inde Sep 06 '19 at 11:55