how to hide highchart x - axis data values

95,892

Solution 1

In HighCharts, bar graphs use inverted axes, so the bottom axis is really the Y axis. (See also "column" graphs where the graphic is rotated 90 degrees, in which case the bottom axis is the X axis.)

You need to add the following to the yAxis config

yAxis: {
  labels: {
    enabled: false
  }
}

See the following for full example: http://jsfiddle.net/k5yBj/433/

Solution 2

To hide labels on X-axis set the option labels: {enabled:false} like this:

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

                    }


.....
....

To hide labels on y-axis set the option labels: {enabled:false} like this:

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

Refer the documentation for futher understanding.

Solution 3

The above popular answer hides the labels only, this left tick marks for me which I also wished to remove.

In that case this works well

    xAxis: {
            visible: false
        },

This is a simple solution to remove everything on the x/y axis for anyone interested. For more information please look here https://api.highcharts.com/highcharts/xAxis.visible

Share:
95,892
Admin
Author by

Admin

Updated on July 09, 2022

Comments

  • Admin
    Admin almost 2 years

    I am drawing a bar chart using highchart.js

    I do not want to show the x - axis data values.

    Can any one tell me which option does it?
    full config:

    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]
                    }]
                });