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

4 minutos de lectura

Avatar de usuario de D3Chiq
D3Chiq

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

No veo una opción “deshabilitar: verdadero” en la API.

¿Alguien puede ayudarme aquí?

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

(Si simplemente dejas el texto en blanco, todavía queda un espacio en blanco en el lugar donde está el título, me gustaría que esto no suceda)

avatar de usuario de jlbriggs
jlbriggs

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: null como método para lograrlo.

Cualquiera de los dos métodos logra el resultado deseado.

  • ¿Podrías echarle un vistazo a esto por mí? He hecho todas las sugerencias aquí y todavía hay un gran espacio en blanco (¿ves el botón de imprimir flotando en el espacio en la parte superior derecha?) goo.gl/jHR5l

    – D3Chiq

    10 de abril de 2013 a las 16:21

  • Creo que lo habré solucionado. Tenía mi leyenda alineada en la parte superior, y el flotante en la leyenda se estableció en falso, creó un espacio para ello allí. Establecí el flotante en la leyenda en verdadero, y ahora ha empujado el resto del gráfico más arriba.

    – D3Chiq

    10 de abril de 2013 a las 16:36

  • Como se indica a continuación, establecer el texto en nulo es la solución documentada.

    –Tom Hubbard

    3 de junio de 2014 a las 15:39

  • A partir de la versión 5.0.9 Esto es incorrecto. Establecer el texto para que una cadena vacía genere un texto de título predeterminado, como ‘Título del gráfico’ y ‘Valores’.

    – mwilson

    12 de marzo de 2017 a las 2:42

  • @mwilson Estoy mirando la demostración del enlace en la respuesta anterior, que (en el momento de este comentario) usa 5.0.9, y todavía funciona con cualquiera null o ''. ¿Puedes explicar o demostrar?

    – jlbriggs

    13 de marzo de 2017 a las 12:38


Desde el documento de gráficos altos:

text: String El título del gráfico. Para deshabilitar el título, establezca el texto en nulo. El valor predeterminado es el título del gráfico.

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

title:{
      text: null
      }

  • Esta es la respuesta correcta, no sé por qué esta no es la respuesta aceptada. Todas las demás soluciones proporcionadas a continuación son solo soluciones alternativas.

    – Gerardo

    5 de febrero de 2015 a las 16:33

  • Puede ser el usuario que hizo la pregunta, simplemente olvide marcarlo como “aceptado”

    – El plastico

    5 de marzo de 2015 a las 13:59

  • probablemente porque la pregunta fue respondida apropiadamente 6 meses antes de que se publicara esta respuesta…

    – jlbriggs

    24 de junio de 2015 a las 11:47

  • “adecuadamente”?? a que respuesta te refieres?? 😉

    – El plastico

    8 de octubre de 2015 a las 9:46

  • Esto es correcto con la API “nueva”. Cuando se hizo la pregunta, no se admitió. Así que ambos son válidos dependiendo de la versión.

    – TecHunter

    9 de febrero de 2016 a las 8:53

Prefiero este método:

title: {
    text: '',
    style: {
        display: 'none'
    }
},
subtitle: {
    text: '',
    style: {
        display: 'none'
    }
},

  • Para una versión más nueva, consulte la respuesta de Plastic con ‘text: null’

    – TecHunter

    9 de febrero de 2016 a las 8:54

¡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/samuelawrentz/hkqnvm7k/4/

Es simple… Solo establece el texto del título en nulo. Como 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 @APIreferencia: http://api.highcharts.com/highcharts#title.text

Siempre puedes hacer esto:

chart:{
    marginTop: 30
}

title:{
    text: ''
}

Eso funcionó para mí 🙂

Nota:

esta respuesta era para version 2.*para versiones más nuevas hay mejores respuestas.

Avatar de usuario de la comunidad
Comunidad

Establezca el campo de texto en nulo

De la documentación en http://api.highcharts.com/highcharts#title.text

texto: Cadena

El título del gráfico. Para deshabilitar el título, establezca el texto en nulo. El valor predeterminado es el título del gráfico.

¿Ha sido útil esta solución?