Achse und Gitterlinien ausblenden Highcharts

80

Ich versuche, die Achse und die Gitterlinien meines Highcharts-Diagramms vollständig auszublenden. Bisher habe ich versucht, die Breite der Linien auf 0 zu setzen, aber es hat nicht geklappt.

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

Ist es möglich, die Achsenlinien / Häkchen und Gitterlinien nur global zu deaktivieren, um ein "einfaches" Diagramm zu erstellen?

charts highcharts Alex
quelle
2
Hier ist, wie man die yAxis versteckt
Dan Dascalescu

Antworten:

149

Einfach hinzufügen

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

zur xAxis-Definition.

Seit Version 4.1.9 können Sie einfach das Achsenattribut verwenden visible:

xAxis: {
    visible: false,
}
dgw
quelle
@dgw Dies macht die x-Achse transparent, nimmt aber immer noch physischen Platz unter den Daten ein. Gibt es eine Möglichkeit, ihm auch eine Höhe von 0 zu geben?
Trevor Burnham
19
Das ist ein bisschen übertrieben. HighCharts sollte eine einfache Eigenschaft namens "sichtbar" implementieren, die umschaltet, ob eine Achse angezeigt wird oder nicht. Ich habe das als Feature-Anfrage gepostet und Sie können hier dafür stimmen .
Dan Dascalescu
2
minorGridLineWidthwar das dunkle Eigentum, das ich suchte. Vielen Dank!
Jetcom
1
@TrevorBurnham - Um den physischen Raum mit den Häkchen zu entfernen, müssen Sie chart.spacing = [0, 0, 0, 0] setzen (oder einfach eine beliebige Achse wie chart.spacingLeft auf Null setzen, wenn Sie dies nicht möchten um alle Abstände zu beseitigen). Das war das fehlende Stück für mich für diese Frage.
Matthew Dean
1
tickLength: 0schien alles zu sein, was ich brauchte, um die Häkchen in meinem Liniendiagramm zu verbergen.
Hartley Brody
74

Für die yAxisbenötigen Sie auch:

gridLineColor: 'transparent',

Zac Morris
quelle
1
Müssen Sie auch das Set title.textzu null? Auf jeden Fall sollte HighCharts nur eine einfache Eigenschaft namens "sichtbar" implementieren, die umschaltet, ob eine Achse angezeigt wird oder nicht. Ich habe das als Feature-Anfrage gepostet und Sie können hier dafür stimmen .
Dan Dascalescu
Wenn Sie auf einstellen gridLineColor, transparentwerden die Gitterlinien möglicherweise vorzeitig entfernt, wenn Sie noch andere Achsen entfernen müssen. Siehe dieses Beispiel .
Dan Dascalescu
28

Wenn Sie eine größere Version als Version 4.9 von Highcharts haben, können Sie diese visible: falsein den Einstellungen xAxisund yAxisverwenden.

Beispiel:

$('#container').highcharts({

    chart: {
        type: 'column'
    },

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

    xAxis: {
        visible: false
    },

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

});
onetwo12
quelle
6
Dies ist die beste Antwort
Micapam
21

Sie können die Gitterlinie in yAxis auch wie folgt ausblenden: 

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}
Shweta Bhagwat
quelle
5

Ich habe es geschafft, meine mit nur auszuschalten

       lineColor: 'transparent',
       tickLength: 0
Ben
quelle
2

Wenn Sie das Konfigurationsobjekt nicht berühren möchten, blenden Sie das Raster einfach durch CSS aus:

.chart-container .highcharts-grid {
   display: none;
}
Iran Reyes
quelle
0

Das hat bei mir immer gut funktioniert:

yAxes: [{
         ticks: {
                 display: false;
                },
0365Chris
quelle