Highcharts x-axis tick starts with an offset

Question

I am trying to remove the offset on the tick of the x-axis.

I want the first tick 10/8 to start from the x-axis and y-axis intersection.

10-8 should be on the marker which is between the two labels.

I have following code for it in highchart.

xAxis: {
            categories: categories,
            title: {
              text: title_x_axis,
              style: {
                fontWeight: 'bold'
              },
              formatter: function(){
                return "<h3><b>" + this.value + "</b></h3>";  
              }
            },
            min: 0,
            startOnTick: true,
            endOnTick: true,
            minPadding: 0,
            maxPadding: 0,
            align: "left"               
        },

Max padding and min padding are set to 0, So I don't know what the problem is?

EDIT:

I have created a fiddle of the type of chart I am dealing with. Note Image below has different x-axis values as I am not using the same value of fiddle. Also I have set tickmarkPlacement: "on" after I took that snapshot. I want Jan label to start from the beginning of line. It has some offset currently.

Can anyone help me with this?

Solution 1

You could use (assuming 'categories' is your array of categories)

 min: 0.5,
 max: categories.length-1.5,
 startOnTick: false,
 endOnTick: false,

Example: http://jsfiddle.net/27hg0v06/1/

Use newset version of highcharts to get fully working tooltip:

<script src="http://github.highcharts.com/highcharts.js"></script>

Solution 2

Take a look at the tickMarkPlacement property:

• http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

By default, it is 'between', which is what you are seeing on your chart.

Setting it to 'on' should do what you need.

You can look at the minPadding and maxPadding properties in addition to the tickMarkPlacement:

• http://api.highcharts.com/highcharts#xAxis.minPadding

• http://api.highcharts.com/highcharts#xAxis.maxPadding

Solution 3

Add pointPlacement: 'on' in plotOptions.

plotOptions: {
    series: {
     pointPlacement: 'on'
   }
}

Comments

[Ashish Singh]

Yaa 'tickmarkPlacement: "0"' it got the label on marker, But how can I change the position to start of x-axis?

[jlbriggs]

If you combine these properties with the endOntick/startOnTick, min/max as mentioned in Kacper's answer on this page, you should be able to fully control every aspect of the axis start/end point.

[elPastor]

In this jsFiddle, the data literally goes off the chart in the y-direction. I'm guessing because the formatter is looking one data point behind due to the .length - 1.5 parameter. How can you stop that from happening but still have the end-to-end effect the OP is looking for?

[Kacper Madej]

@pshep123 Are you referring to the JSFiddle demo in the answer? Data is not off in the y-direction and .length - 1.5 is about xAxis (left and right), so has nothing to do with y-direction (up and down). Please collaborate or maybe open a new question.

[Allan Jebaraj]

I'm using this code but it is not working if the value is 2. Any ideas?

[Kacper Madej]

@AllanJebaraj I assume that you are using 2 categories. Changing min to 0.499 will resolve the problem: jsfiddle.net/BlackLabel/6v0578x1/3 If I have assumed wrongly please provide more info and a live demo for the problem.