CODEWITHSUNDEEP
javascripthighcharts
Ross Deane
Ross Deane

Reputation: 3200

How to get Highcharts X-Axis Categories starting at the left most point

I have a Highcharts area chart, with string categories on the X-Axis. I want the chart to start at the left most edge of the x-axis and end at the rightmost edge, without any padding. In the image below, the red arrows show the spacing that I want to get rid of. Without text categories this is easily achievable, but with I just can't seem to figure it out. Any help appreciated, thanks.

Chart with unwanted padding

Upvotes: 14

Views: 16112

Answers (6)

Jonas
Jonas

Reputation: 157

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.

Upvotes: 4

nklein
nklein

Reputation: 79

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)

Upvotes: 3

Ivo Yanchev
Ivo Yanchev

Reputation: 49

You can use spacingLeft and spacingRight to set the spacing:

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

Upvotes: 4

Igor Shastin
Igor Shastin

Reputation: 2888

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.

Upvotes: 15

jonathan
jonathan

Reputation: 1

You need the following settings.

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

Upvotes: 0

dgw
dgw

Reputation: 13646

Just add:

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

Upvotes: 2

Related Questions