tickPositioner Demo - Hardik

Using tickPositioner for x Axis labels

by Chris Vecchio

HTML

<div id="container" style="height: 400px"></div>

<script type="text/javascript" src="https://code.highcharts.com/stock/highstock.js"></script>

JavaScript

var data = [],
    dates = [],
    dt = new Date(0);

for(var i = 0; i < 20; i++) {
    data.push({x: dt.getTime(), y : 5 });
    dates.push(dt.getTime());
    dt.setMonth(dt.getMonth() + 1);  
}

window.chart = new Highcharts.StockChart({
    chart: {
        renderTo: 'container'
    },
        
    xAxis: {
        type: 'datetime',
        ordinal: true,
        //tickPositions:tickPos,
        tickPositioner:function(min,max){
        var dt = new Date(0), tickPos = [];
        for(var i = 0; i < 20; i+=1) {
            dt = dates[i];
            tickPos.push(dt);
        }
            return tickPos;
        },
        labels: { formatter: function() { return Highcharts.dateFormat("%b'%y", this.value);  } },
        range: 200*24*60*60*1000,
        showFirstLabel: true,
        showLastLabel: true
    },
    
    rangeSelector: { enabled: false, inputEnabled: false },
    
    series: [{
        type: "column",
        data: data
    }]
});