score:15

Accepted answer

You can achieve the desired result by redefining labels.formatter on axis. jsFiddle is here.

But if you want to keep it simple and pass axis.categories in traditional way (I think that this is a way more better), I suggest you to use a tiny hack and redefine an Axis.init function. Try it on jsFiddle.

UPD: I've updated my previous fiddle a little. Check it out. I think that you can combine all my solution to get a nicer one.

score:0

You need the following settings.

xAxis: {           
  plotLines: [{
    value: 0, 
    color: '#color'
  }],
  tickmarkPlacement: 'on'
},
yAxis: {           
  lineWidth: 0,
}

score:2

Just add:

...
xAxis: {
  startOnTick: true,
  ...
},
...

score:3

A cleaner solution is to use the pointPlacement reference provided in the Highchart API.

Add pointPlacement: 'on' and you should be in business. (For reference, here is their example JSFiddle)

score:3 

xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5']
},
series: [
    {
      name: 'name of series',
      data: [0, 2, 0, 2, 0],
      pointPlacement: 'on',
    }
]

This solution worked for me, maybe it helps. I can't confirm whether or not this applies to other ways of inputting data.

score:4

You can use spacingLeft and spacingRight to set the spacing:

chart: {
         renderTo: 'chart1',
         type: 'area',
         spacingLeft: -21,      
         spacingRight: -21,      
         spacingBottom: 1
},

Related Query

More Query from same tag