CODEWITHSUNDEEP
javascripthighcharts
Shark7
Shark7

Reputation: 569

How to force display of x-axis labels in Highcharts?

I'm working with some small size charts in Highcharts, and it seems that due to the size Highcharts is showing labels for only alternating ticks on the x-axis. What I'd like to do to show the label for every tick on the x-axis, even if it means using a smaller font. I haven't been able to figure out how to do this.

I'm loading csv data from a pre HTML block. Here's the code:

<body>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>    <div id="container"></div>
</body>

<div id="chart_left_1" style="min-width: 200px; max-width: 350px; height: 200px;"></div>
<pre id="gdpgr" style="display:none">year,gdp_yoy,us_gdp_yoy,
2009,1.9000,-2.1000,
2010,7.6000,3.8000,
2011,6.0000,3.7000,
2012,0.9000,4.1000,
2013,-0.1000,3.2000,
2014,5.8000,4.1000,
</pre>

$(function () {
$('#chart_left_1').highcharts({
chart: {
        borderColor: '#000080',
    borderRadius: 0,
        borderWidth: 2
    },
    title: {text: 'GDP Growth', margin: 0},
    exporting: {enabled: false},
    legend: {enabled: false},
    subtitle: {text: null},
    xAxis: {
        },
    yAxis: {
         tickInterval: 2,
      title: {text: null},
         labels: {
         formatter: function() {
          return this.value + '%';
          }
         },
    },
    tooltip: {
       enabled: true,
   valueSuffix: '%'
    },
    data: {
        csv: document.getElementById('gdpgr').innerHTML,
        startRow: 1,
        endRow: 11,
        endColumn: 2,
        firstRowAsNames: false
    },

    xAxis: {
        allowDecimals: false
    },

    series: [{
        type: 'column',
        name: ' GDP growth',
        color: '#000080'
},{
        type: 'column',
        name: 'US GDP Growth',
        color: '#CCCCCC'
    }]
  });
});

And Here's a jsFiddle: https://jsfiddle.net/otfq0dch/1/

Upvotes: 3

Views: 9253

Answers (3)

Kondal
Kondal

Reputation: 2970

xAxis: {
    type: 'category',
    allowDecimals: true,
    labels: {
    step: 1
    }
  },

Upvotes: 0

morganfree
morganfree

Reputation: 12472

In this case, if you dont need to use other type of xAxis than category, you can use step label's property.

xAxis: {
  type: 'category',
  allowDecimals: false,
  labels: {
    step: 1
  }
},

Example: https://jsfiddle.net/otfq0dch/3/

http://api.highcharts.com/highcharts/xAxis.labels.step

Upvotes: 6

Jag
Jag

Reputation: 61

the xAxis is defined twice, i consolidate and added a new option called tickInterval which is set to 1

https://jsfiddle.net/otfq0dch/2/

xAxis: {
    allowDecimals: false,
    tickInterval: 1
},

link to the docs: http://api.highcharts.com/highcharts/xAxis.tickInterval

Upvotes: 2

Related Questions