TickInterval

by Yonathan Benitah

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height:400px"></div>

JavaScript

$(function () {


Highcharts.theme = {
   colors: ["#0085e1"],
   chart: {
       backgroundColor: "transparent"
   }, 

   tooltip: {
  backgroundColor: '#0085e1',
  style: {
     color: '#ffffff'
  }
   },



};
(function(H) {
H.wrap(H.Tick.prototype, 'render', function(p, index, old, opacity) {
    var tick = this,
        d,
        size = 0.25; // = 75%, 0.5 = 50%, 0.75 = 25% etc.
    p.call(this, index, old, opacity);

    if(tick.gridLine && this.axis.isXAxis) {

        d = tick.gridLine.d.split(' '); // get default path
        console.log(d[5]);
        d[2] = ( d[5] - d[2] ) * size + tick.axis.chart.plotTop; // modify path - don't forget about plotTop
        tick.gridLine.attr({
            d: d // apply new path
        });
    }

});
})(Highcharts)

Highcharts.setOptions(Highcharts.theme);        
Highcharts.setOptions({lang: {  thousandsSep: ','}});

$('#container').highcharts({
     chart: {
        type: 'spline',

    },
    title: {
        text: '',
        x: -20 //center
    },       
    legend: {
        enable: false
    },
    xAxis: {
        categories: ['2011', '2012', '2013', '2014', '2015', '2016'],
        gridLineWidth: 0,
        gridLineColor: '#e5f2fd',
         minorTickWidth: 0
    },
    yAxis: {
    id: 1,
          title: {
            text: null
        },
        labels: {
          enabled: false
        },
        gridLineColor: 'transparent'
    },
    tooltip: {
        formatter:function(){
            var nosheets = this.y.toLocaleString();
                return  nosheets + ' sheets';
        },
        borderRadius: 20,
        style: {
          padding: 5    
        }
    },

    plotOptions: {
        spline: {

              marker: {
                radius: 5,
                lineColor: '#0085e1',
                lineWidth: 1
            }
        },
            series: {
                pointWidth: 1
            }
    },
    series: [{
        name: 'Sheets',
        data: [0, 1000, 835000, 5100000,...