Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you remove x-axis labels from a highchart.js bar chart

I'm using highcharts.js to build a bar plot. I cannot figure out how to remove the x-axis labels? I know I have to alter the xAxis object but I've tried all the options below and nothing has worked for me. I know this is possible but I'm missing something. Any help is greatly appreciated. Here is the fiddle with the plot I started with fiddle.

xAxis: {
    categories: [''],
    title: {
        text: null
    },
    labels: {
     enabled:false
    }
}

xAxis: {
    labels: {
     enabled:false
    }
}

data object, only a sample size..

var obj = {
    "data": [0.397851,1721745],
    "color":'rgb(51, 204, 51)',
    "organism_labels":"klebsiella_oxytoca"
},{
    "data": [0.609935,66529],
    "color":'rgb(51, 204, 51)',
    "organism_labels":"staphylococcus_aureus"
},{
    "data": [0.505084,45563],
    "color":'rgb(51, 204, 51)',
    "organism_labels":"legionella_longbeachae"
},{
    "data": [0.669884,83471],
    "color":'rgba(223, 83, 83, .5)',
    "organism_labels":"enterobacter_aerogenes"
}, {
    "data": [0.688673,1309077],
    "color":'rgba(223, 83, 83, .5)',
    "organism_labels":"pseudomonas_aeruginosa"
}

HighCharts.js

    /** Histogram **/
    $(function () {
        $('#histogram').highcharts({
            chart: {
                type: 'column',
                zoomType: 'xy'
            },
            title: {
                text: 'Histogram'
            },
            subtitle: {
                text: 'Please Help!'
            },
            xAxis: {
                min:0,
                max:1,
                minPadding: 0,
                maxPadding: 0
            },
            yAxis: {
                title: {
                    text: 'Reads'
                }
            },
            credits: {
              enabled: false
            },
            series:
                obj
        });
    });

Current Plot:

current plot example

like image 337
NodeJS_dev Avatar asked May 25 '16 05:05

NodeJS_dev


People also ask

How do I remove horizontal axis labels?

Select the axis chart object. To show or hide the axis labels, in the Properties pane, select or clear the Axis label check box.

How do you change the label on X plot?

To set labels for X and Y axes in R plot, call plot() function and along with the data to be plot, pass required string values for the X and Y axes labels to the “xlab” and “ylab” parameters respectively. By default X-axis label is set to “x”, and Y-axis label is set to “y”.

How do you change a chart label?

In the worksheet, click the cell that contains the title or data label text that you want to change. Edit the existing contents, or type the new text or value, and then press ENTER. The changes you made automatically appear on the chart.


2 Answers

From your screenshot, it looks like what you want to remove is the legend, not the x-axis labels.

Since each of the items in your obj JSON array have their own unique names, the legend will push out each of them unless you set legend: { enabled: false } in your chart options (see http://api.highcharts.com/highcharts#legend.enabled).

Please let me know if that answers your question.

like image 103
Mike Zavarello Avatar answered Sep 27 '22 22:09

Mike Zavarello


You can try check out the property visible.

  xAxis :{
    visible : false
  }

Whether axis, including axis title, line, ticks and labels, should be visible. Defaults to true.

like image 45
Samuel Santos Avatar answered Sep 27 '22 20:09

Samuel Santos