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 a

Answer 1

Add pointPlacement: 'on' in plotOptions.

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

Answer 2

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>

Answer 3

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

Answer 4

Updated Fiddle:

$(function () {
    $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            tickInterval: 1,
            tickmarkPlacement: "on",
            startOnTick: true,
            endOnTick: true,
            minPadding: 0,
            maxPadding: 0,
            offset: 0
        },
        plotOptions: {
          series: {
            findNearestPointBy: 'x',
            label: {
              connectorAllowed: false
            },
            pointPlacement: 'on'
          }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>

You Just Need to Add the following before series object:

plotOptions: {
          series: {
            findNearestPointBy: 'x',
            label: {
              connectorAllowed: false
            },
            pointPlacement: 'on'
          }
        },