highchart place x-axis labels in between ticks on a datetime axis

Question

Using various posts/questions in SO as reference I created a scatter highchart jsfiddle

xAxis: {
        opposite:true,
        type: 'datetime',
        gridLineWidth: 1,
        gridLineDashStyle: 'ShortDot',
        gridLineColor:'black',
        alternateGridColor: 'lightgrey',
        tickInterval: 3 * 30 * 24 * 3600 * 1000, // 1 quarter
        labels: {
            //align: "left",
            //padding:200,
            formatter: function () {
                var s = "";
                if (Highcharts.dateFormat('%b', this.value) == 'Jan') {
                    s = s + "Q1"
                };
                if (Highcharts.dateFormat('%b', this.value) == 'Apr') {
                    s = s + "Q2"
                };
                if (Highcharts.dateFormat('%b', this.value) == 'Jul') {
                    s = s + "Q3"
                };
                if (Highcharts.dateFormat('%b', this.value) == 'Oct') {
                    s = s + "Q4"
                };
                s = s + " " + Highcharts.dateFormat('%Y', this.value);
                return s;
            }
        },
        plotLines: [{
            color: 'red', // Color value
            value: now, // Value of where the line will appear
            width: 2, // Width of the line
            label: {
                text: 'Now',
                align: 'center',
                verticalAlign: 'bottom',
                y: +20,
                rotation: 0
            }
        }]
    },

But I'm struck with having the X-axis label positioned near the tick. How to move to middle of the grid?

existing chart

Is there anyway I can achieve the below?

I tried align, padding but didn't help. When the timeline increases I should still have the labels positioned in the middle. should I do something with tickInterval? It might be a simple property I'm missing.

I found this link jsfiddle which addresses my concern but with 2 x-axis and I'm populating the data from a list.

With a category axis, you can use 'tickMarkPlacement:between'. But since you are using a datetime axis, your only option may be to set the 'x' property of the labels, and push them to the right or left — jlbriggs, Nov 17 '15 at 15:39

score 1 · Answer 1 · edited May 23 '17 at 12:15

I implemented Christopher Cortez' solution found here:

However, also changed to to fire on the highcharts load event, rather than the callback, and I've changed it to be recalled when the HighCharts redraw event is fired, so that they stay aligned when the page is resized.

$('#container').highcharts({
        chart: {
            defaultSeriesType: 'scatter',
            events: {
                 load: centerLabels,
                 redraw: centerLabels                    
            }
        },

        /* ... all the other options ...*/

 });

Where

function centerLabels(chart) {        
    var $container = $(chart.target.container); 
    var axes = chart.target.axes;

    var $labels = $container.find('.highcharts-axis-labels .timeline_label');
    var $thisLabel, $nextLabel, thisXPos, nextXPos, delta, newXPos;

    $labels.each(function () {
        $thisLabel = $(this).parent('span');
        thisXPos = parseInt($thisLabel.css('left'));

        $nextLabel = $thisLabel.next();
        // next position is either a label or the end of the axis
        nextXPos = $nextLabel.length ? parseInt($nextLabel.css('left')) : axes[0].left + axes[0].width;
        delta = (nextXPos - thisXPos) / 2.0;
        newXPos = thisXPos + delta;

        // remove the last label if it won't fit
        if ($nextLabel.length || $(this).width() + newXPos < nextXPos) {
            $thisLabel.css('left', newXPos + 'px');
        } else {
            $thisLabel.remove();
        }
    });
}

JSFiddle

It works. but when I try to _export_ the labels are not aligned in the middle. — damseldeebi, Nov 18 '15 at 05:43
Try to use [load event](http://api.highcharts.com/highcharts#chart.events.load) instead of callback. — Sebastian Bochan, Nov 18 '15 at 10:15
That's a good idea, much cleaner. I edited my answer. However, it still doesn't solve the exporting problem. — Charles Clayton, Nov 18 '15 at 15:51

highchart place x-axis labels in between ticks on a datetime axis

1 Answers1