Chart.js v2 ocultar rótulos de conjunto de dados

106

Eu tenho os seguintes códigos para criar um gráfico usando 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
        }]
    }
});

Os códigos parecem simples, mas não consigo remover o rótulo do gráfico. Tentei várias soluções que encontrei online, mas a maioria delas usa Chart.js v1.x.

Como posso remover os rótulos do conjunto de dados?

chart.js chart.js2

— Raptor
fonte

252

Basta definir as opções labele tooltipassim

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

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

— potatopeelings
fonte

funciona como charme, obrigado. a propósito, como alterar a cor do gradiente do gráfico de linha?

— Raptor

1

Você quer dizer como usar um gradiente como borderColor / backgroundColor. Basta criar um no contexto e usá-lo ao inicializar - veja jsfiddle.net/g9h6gtvx

— potatopeelings

1

E se eu quiser usá-lo em um conjunto de dados, mas não no outro

— Nick Alexander

Funciona! apenas uma pergunta, onde você encontrou todas essas opções?

— fangzhzh

39

adicionar:

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

no início do seu código de script;

— Rochan
fonte

Simples e funciona perfeitamente. Percebi que a resposta aceita estava quebrando algumas coisas.

— stickdeodorant

9

Você também pode colocar a dica de ferramenta em uma linha removendo o "título":

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

— mpen
fonte

8

É tão simples quanto adicionar isto: legend: { display: false, }

// Ou, se quiser, pode usar esta outra opção que também deve funcionar:

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

— Reynald Ramirez de Luna
fonte

Resposta simples, não há necessidade de reinventar a roda.

— TNT

options: {legend: {display: false,}} Ajuda a escrever em qual bloco colocá-lo (este é basicamente o problema com a documentação)

— Normajean

2

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

— Juan Ignacio Urcola
fonte

2

Olá, bem-vindo ao SO. considere adicionar uma breve explicação ao lado do código

— bagerard