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

Respuestas:

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