Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to hide highchart x - axis data values

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]
                }]
            });
like image 657
Nurul Asad Avatar asked Oct 28 '11 11:10

Nurul Asad


People also ask

How to hide x-axis in highcharts?

To disable crosshair you just need to set this property to false. If you want to get rid of the labels on the axis you need to set xAxis. labels. enabled property to false.

How do you rotate the x-axis labels in Highcharts?

I use : xAxis: { labels: { rotation: -45, align: 'top' }, categories: xAxisLabel }, for rotate the xaxis labels when number of labels are large.

What is the title of the x-axis?

The independent variable belongs on the x-axis (horizontal line) of the graph and the dependent variable belongs on the y-axis (vertical line).

How do I change the y axis value in Highcharts?

A simpler way to go about this is using the tickInterval attribute: yAxis: { title: { text: 'Percent' }, tickInterval: 10, labels: { formatter: function(){ return this. value + '%'; } } }, That will force your axis intervals to show up as you requested.


3 Answers

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.

like image 37
Rahul Gupta Avatar answered Oct 07 '22 02:10

Rahul Gupta


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/

like image 104
Nick B Avatar answered Oct 07 '22 03:10

Nick B


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

like image 26
RS3 Avatar answered Oct 07 '22 01:10

RS3