Chart JS - hide caption

Asked

Viewed 3,209 times

2

Hello!

I’m using Chart.js in a project, but I need to hide the caption that is displayed above the chart.

Someone who has worked with this chart knows how to hide this part?

Follow the link to the chart I’m using:

http://www.chartjs.org/docs/#bar-Chart-Introduction

Follow the code I’m using:

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Muito Bom", "Bom", "Regular", "Ruim", "N/A"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2],
            backgroundColor: [
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)'
            ]
        }]
    },
});

I need to hide the label: label: '# of Votes', but if I leave it blank or remove it stays as Undefined.

javascript chartjs

  • You are talking about the tooltip that appears on the mouse?

  • I am referring to the caption that is written: My First Dataset, I will insert the code into the question.

  • You can put the functional example here https://jsfiddle.net/0tfvnmx1/3/ . I already imported the library. To see if I can help you

  • 2

    Your answer is here in the documentation

  • I found the answer, inserted in the comment below, found in the documentation the option to disable the legend.

3 answers

6


I got the answer, I must insert the following line in the script:

options: {
        legend: {
            display: false
        }
    }

That would look like this:

var ctx = document.getElementById("campos_um");
 var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Muito Bom", "Bom", "Regular", "Ruim", "N/A"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2],
            backgroundColor: [
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)',
            'rgba(151,187,205,0.5)'
            ]
        }]
    },
    options: {
        legend: {
            display: false
        }
    }
});

4

You can disable using :

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

Source: Documentation

0

Browser other questions tagged javascript chartjs

You are not signed in. Login or sign up in order to post.