Ocultar ejes y líneas de cuadrícula Highcharts

80

Estoy tratando de ocultar el eje y las líneas de cuadrícula de mi gráfico Highcharts por completo. Hasta ahora he intentado establecer el ancho de las líneas en 0, pero no funcionó.

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}

¿Es posible deshabilitar globalmente las líneas / marcas del eje y las líneas de cuadrícula para crear una gráfica "simple"?

charts highcharts

— alex
fuente

2

Aquí se explica cómo ocultar el yAxis

— Dan Dascalescu

150

Solo agrega

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

a la definición de xAxis.

Desde la versión 4.1.9, simplemente puede usar el atributo de eje visible:

xAxis: {
    visible: false,
}

— dgw
fuente

@dgw Esto hace que el eje x sea transparente, pero aún ocupa espacio físico debajo de los datos. ¿Hay alguna manera de darle altura 0 también?

— Trevor Burnham

19

Eso es un poco exagerado. HighCharts debería implementar una propiedad simple llamada "visible" que alternaría si un eje se muestra o no. Lo he publicado como una solicitud de función y puedes votarlo aquí .

— Dan Dascalescu

2

minorGridLineWidthera la propiedad oscura que estaba buscando. ¡Gracias!

— jetcom

1

@TrevorBurnham: para eliminar el espacio físico que tenía marcas de verificación, debe establecer chart.spacing = [0, 0, 0, 0] (o simplemente establecer cualquier eje, como chart.spacingLeft, en cero, si no lo desea para eliminar todo espacio). Esa fue la pieza que me faltaba para esta pregunta.

— Matthew Dean

1

tickLength: 0parecía ser todo lo que necesitaba para ocultar las marcas de graduación en mi gráfico de líneas.

— Hartley Brody

74

Para el yAxistambién necesitarás:

gridLineColor: 'transparent',

— Zac Morris
fuente

1

¿También necesita configurar el title.texta null? De todos modos, HighCharts debería implementar una propiedad simple llamada "visible" que cambiaría si se muestra un eje o no. Lo he publicado como una solicitud de función y puedes votarlo aquí .

— Dan Dascalescu

la configuración gridLineColoren transparentpuede eliminar prematuramente las líneas de la cuadrícula si aún tiene otros ejes para eliminar. Vea este ejemplo .

— Dan Dascalescu

28

Si tiene una versión más grande que la v4.9 de Highcharts, puede usarla visible: falseen xAxisyyAxis configuración .

Ejemplo:

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    title: {
        text: 'Highcharts axis visibility'
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }

});

— onetwo12
fuente

6

Esta es la mejor respuesta

— micapam

21

también puede ocultar la línea de cuadrícula en yAxis como:

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

— Shweta Bhagwat
fuente

5

Me las arreglé para apagar el mío con solo

       lineColor: 'transparent',
       tickLength: 0

— Ben
fuente

2

Si no desea tocar el objeto de configuración, simplemente oculte la cuadrícula mediante css:

.chart-container .highcharts-grid {
   display: none;
}

— Irán Reyes
fuente

0

Esto siempre me ha funcionado bien:

yAxes: [{
         ticks: {
                 display: false;
                },

— 0365Chris
fuente