comment masquer les valeurs des données de l'axe x de highchart

Question

Je dessine un graphique à barres en utilisant highchart.js

Je ne veux pas afficher les valeurs des données de l'axe des x.

Quelqu'un peut-il me dire quelle option le fait ?
configuration complète :

var chart = new Highcharts.Chart({
                chart: {
                    renderTo: container,
                    defaultSeriesType: 'bar'
                },
                title: {
                    text: null
                },
                subtitle: {
                    text: null
                },
                xAxis: {
                    categories: [''],
                    title: {
                        text: null
                    },
                    labels: {enabled:true,y : 20, rotation: -45, align: 'right' }

                },
                yAxis: {
                    min: 0,
                    gridLineWidth: 0,
                    title: {
                        text: '',
                        align: 'high'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '';
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        },
                        pointWidth: 35,
                        color: '#D9CDC1'
                    }
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'Year 1800',
                    data: [107]
                }]
            });

Answer 1

Dans HighCharts, les diagrammes à barres utilisent des axes inversés, de sorte que l'axe du bas est en réalité l'axe des ordonnées. (Voir également les graphiques en "colonnes" où le graphique est tourné de 90 degrés, auquel cas l'axe du bas est l'axe des X).

Vous devez ajouter les éléments suivants à la configuration de yAxis

yAxis: {
  labels: {
    enabled: false
  }
}

Voir l'exemple suivant pour un exemple complet : http://jsfiddle.net/k5yBj/433/

Answer 2

Pour cacher les étiquettes sur l'axe des X, définissez l'option labels: {enabled:false} comme ça :

    .....
    ........
    ,
                    xAxis: {
                        categories: [''],
                        title: {
                            text: null
                        },
                        labels: {
                         enabled:false,//default is true
                         y : 20, rotation: -45, align: 'right' }

                    }

.....
....

Pour cacher les étiquettes sur l'axe des y, définissez l'option labels: {enabled:false} comme ça :

.....
.......
,
                yAxis: {
                    min: 0,
                    gridLineWidth: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels:{
                        enabled:false//default is true
                    }
                },
.........
......

Consultez la documentation pour une meilleure compréhension.

Answer 3

La réponse populaire ci-dessus ne cache que les étiquettes, ce qui a laissé des marques de coche que j'ai également souhaité supprimer.

Dans ce cas, cela fonctionne bien

    xAxis: {
            visible: false
        },

Il s'agit d'une solution simple pour supprimer tout ce qui se trouve sur l'axe x/y pour toute personne intéressée. Pour plus d'informations, voir ici https://api.highcharts.com/highcharts/xAxis.visible

Answer 4

Si vous cachez les données x, alors regardez ceci https://jsfiddle.net/anrilafosel/3g4z5kc3/

chart.xAxis[0].setCategories(newCategories);
for (i = 0; i < chart.series.length; i++) {
  var newData = [];
  for (j = 0; j < toggler_hc13.length; j++)
    if (toggler_hc13[j] === 1)
      newData.push(series_hc13[i].data[j]);
  chart.series[i].setData(newData);
}