Chart.js v2 ocultar etiquetas de conjuntos de datos

106

Tengo los siguientes códigos para crear un 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
        }]
    }
});

Los códigos parecen simples, pero no puedo quitar la etiqueta del gráfico. Probé muchas soluciones que encontré en línea, pero la mayoría usa Chart.js v1.x.

¿Cómo puedo eliminar las etiquetas del conjunto de datos?

chart.js chart.js2

— Raptor
fuente

252

Simplemente configure las opciones labely tooltipasí

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

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

— peladuras de papa
fuente

funciona a las mil maravillas, gracias. por cierto, ¿cómo cambiar el color del degradado del gráfico de líneas?

— Raptor

1

Te refieres a cómo usar un degradado como borderColor / backgroundColor. Simplemente cree uno en el contexto y utilícelo al inicializar; consulte jsfiddle.net/g9h6gtvx

— potatopeelings

1

¿Qué pasa si quiero usarlo en un conjunto de datos pero no en el otro

— Nick Alexander

¡Funciona! solo una pregunta, ¿dónde encontraste todas estas opciones?

— Fangzhzh

39

añadir:

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

al comienzo de su código de secuencia de comandos;

— Rochan
fuente

Simple y funciona perfectamente. Noté que la respuesta aceptada estaba rompiendo algunas cosas.

— stickdeodorant

9

También puede poner la información sobre herramientas en una línea eliminando el "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
fuente

8

Es tan simple como agregar esto: legend: { display: false, }

// O si lo desea, puede usar esta otra opción que también debería funcionar:

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

— Reynald Ramirez de Luna
fuente

Respuesta simple, no es necesario reinventar la rueda.

— TNT

opciones: {leyenda: {pantalla: falso,}} Ayuda a escribir en qué bloque ponerlo (este es básicamente el problema con la documentación)

— Normajean

2

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

— Juan Ignacio Urcola
fuente

2

Hola, bienvenido a SO. considere agregar una breve explicación junto al código

— bagerard