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?

Raptor
fuente

Respuestas:

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

ingrese la descripción de la imagen aquí

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