web-dev-qa-db-fra.com

Chart.js v2 masquer les étiquettes de jeu de données

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 trouvées en ligne, mais la plupart d'entre elles utilisent Chart.js v1.x.

Comment puis-je supprimer les étiquettes du jeu de données?

76
Raptor

Il suffit de définir les options label et tooltip comme suit

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

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

180
potatopeelings

ajouter:

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

au début de votre code de script;

25
Rochan

Vous pouvez également mettre l'info-bulle sur une 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,
            }
        },
    },
});

enter image description here

7
mpen

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;