¿Hay alguna forma de deshabilitar el título y el subtítulo en Highcharts?

108

Solo voy a codificarlo usando html que está alrededor del gráfico, no quiero usar el archivo.

No veo la opción "disable: true" en la API.

¿Alguien puede ayudarme aquí?

¿Cómo deshabilita el título / subtítulo en highcharts?

(si simplemente deja el texto en blanco, todavía crea un espacio en blanco en ese lugar donde está el título, me gustaría que esto no sucediera)

highcharts D3Chiq
fuente
4
¿Puede marcar la respuesta como aceptada? ;)
Plástico

Respuestas:

159

Establecer el texto del título en una cadena vacía es la forma de hacerlo.

No se crea ningún espacio para el título en ese caso:

sin texto: http://jsfiddle.net/jlbriggs/JVNjs/284/

con texto: http://jsfiddle.net/jlbriggs/JVNjs/286/

title:{
    text:''
}

Si desea menos espacio del que queda en ese caso, simplemente configure su 'marginTop' en 0

{{ editar debido a numerosos comentarios :

Como se señaló varias veces a continuación, la documentación ahora establece text: nullcomo el método para lograr esto.

Cualquiera de los métodos logra el resultado deseado.

jlbriggs
fuente
¿Podrías echar un vistazo a esto por mí? He hecho todas las sugerencias aquí y todavía hay un gran espacio en blanco (¿ve el botón de impresión flotando en el espacio en la parte superior derecha?) Goo.gl/jHR5l
D3Chiq
1
Creo que lo he resuelto. Tenía mi leyenda alineada en la parte superior, y la flotación en la leyenda se estableció en falso, creó un espacio allí. Establecí el flotante en la leyenda en verdadero, y ahora ha empujado el resto del gráfico hacia arriba.
D3Chiq
2
Como se señala a continuación, establecer el texto en nulo es la solución documentada.
Tom Hubbard
1
A partir de la versión 5.0.9esto es incorrecto. Configurar el texto para que una cadena vacía genere un texto de título predeterminado, como 'Título del gráfico' y 'Valores'.
mwilson
@mwilson Estoy viendo la demostración del enlace en la respuesta anterior, que es (en el momento de este comentario) usando 5.0.9, y todavía funciona con nullo ''. ¿Puede elaborar o demostrar?
jlbriggs
61

Del documento de highcharts :

texto: Cadena El título del gráfico. Para deshabilitar el título, establezca el texto en nulo. Por defecto, el título del gráfico.

violín: http://jsfiddle.net/daub10dr/

title:{
      text: null
      }
El plastico
fuente
1
Esta es la respuesta correcta, no sé por qué no es la respuesta aceptada. Todas las demás soluciones proporcionadas a continuación son solo soluciones.
Gerard
Puede ser que el usuario que hizo la pregunta simplemente olvide marcarla como "aceptada"
Plástico
2
probablemente porque la pregunta fue respondida apropiadamente 6 meses antes de que se publicara esta respuesta ...
jlbriggs
"adecuadamente"?? que respuesta quieres decir ;-)
Plástico
4
Esto es correcto con la "nueva" API. Cuando se hizo la pregunta, esto no fue respaldado. Por lo que ambos son válidos según la versión.
TecHunter
40

Prefiero este método:

title: {
    text: '',
    style: {
        display: 'none'
    }
},
subtitle: {
    text: '',
    style: {
        display: 'none'
    }
},
TecHunter
fuente
2
Para una versión más reciente, consulte la respuesta de Plastic con ´text: null´
TecHunter
17

¡Muy simple! En la última versión de Highcharts, simplemente establezca las propiedades de título y subtítulo en falso.

{
title: false,
subtitle: false
}

Encuentra el violín de trabajo aquí: https://jsfiddle.net/samuellawrentz/hkqnvm7k/4/

samuellawrentz
fuente
13

Es simple ... Solo establece el texto del título en nulo. Me gusta esto

    $(function () {
$('#container').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    title: {
        text: null  
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});

});

ver @ APIreference: http://api.highcharts.com/highcharts#title.text

aspadacio
fuente
1
Basado en el documento, se convierte undefineddesde esta confirmación github.com/highcharts/highcharts/commit/…
foxiris
9

Siempre puedes hacer esto:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

Eso funcionó para mí :-)

nota: esta respuesta fue para version 2.*, para las versiones más nuevas hay mejores respuestas.

Andy
fuente
8

Según el documento de Highcharts, la forma correcta es establecer 'texto' en nulo.

Long Huynh
fuente
> El título del gráfico. Para deshabilitar el título, establezca el texto como indefinido.
Ini
3

Aqui esta la solucion

title: {
    text: null
},
subtitle: {
    text: null
}
RahulKurumkar
fuente
3

En react-native, el siguiente código funcionó para mí,

  title: {
    style : {
      display : 'none'
    }
 }

Espero que haya ayudado.

Iva
fuente
2

Solo escribe un objeto JSON

title : {
  style : {
    display : 'none'
  }
}
Ashish Bardiya
fuente
1

Para aquellos que usan TypeScript, puede configurar Highcharts.TitleOptions para ocultar el título del gráfico.

title: {
  text: undefined
},
subtitle: {
  text: undefined
}
Andrien Pecson
fuente
-1

Esto es un truco, pero también puedes intentarlo:

title: {
    text: '<span class="hidden">My custom Hello</span>',
    align:"left",
    useHTML:true
}
Hugo Chan
fuente