Chart.js v2 Masquer les étiquettes des jeux de données

107

J'ai les codes suivants pour créer un graphique en utilisant 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
        }]
    }
});

Les codes semblent simples, mais je ne peux pas supprimer l'étiquette du graphique. J'ai essayé beaucoup de solutions que j'ai trouvées en ligne, mais la plupart d'entre elles utilisent Chart.js v1.x.

Comment puis-je supprimer les étiquettes de l'ensemble de données?

Raptor
la source

Réponses:

253

Il suffit de définir les options labelet tooltipcomme ça

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

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

pommes de terre
la source
fonctionne comme du charme, merci. au fait, comment changer la couleur du dégradé du graphique en courbes?
Raptor
1
Vous voulez dire, comment utiliser un dégradé comme borderColor / backgroundColor. Créez-en un sur le contexte et utilisez-le lors de l'initialisation - voir jsfiddle.net/g9h6gtvx
potatopeelings
1
Et si je veux l'utiliser sur un ensemble de données mais pas sur l'autre
Nick Alexander
Ça marche! juste une question, où avez-vous trouvé toutes ces options?
fangzhzh le
39

ajouter:

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

au démarrage de votre code de script;

Rochan
la source
Simple et fonctionne parfaitement. J'ai remarqué que la réponse acceptée cassait certaines choses.
stickdeodorant
9

Vous pouvez également mettre l'info-bulle sur une seule ligne en supprimant le "titre":

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

entrez la description de l'image ici

mpen
la source
8

C'est aussi simple que d'ajouter ceci: legend: { display: false, }

// Ou si vous le souhaitez, vous pouvez utiliser cette autre option qui devrait également fonctionner:

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

Reynald Ramirez de Luna
la source
Réponse simple, pas besoin de réinventer la roue.
TNT
options: {legend: {display: false,}} Cela aide à écrire dans quel bloc le mettre (c'est fondamentalement le problème avec la documentation)
Normajean
2
new Chart('idName', {
      type: 'typeChar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });
Juan Ignacio Urcola
la source
2
Salut, bienvenue à SO. pensez à ajouter une brève explication à côté du code
bagerard