Highcharts: align markers with xAxis

Question

I have a type area chart, with minor grid lines and a datetime xAxis. data is feed through an array of y values, and I got to render xAxis labels depending on the data length successfully.

My issues are:

the chart has a unwanted padding on the X axis
the markers don't align with their labels

Check it:

Here's a working fiddle: https://jsfiddle.net/fernandaparisi/e07q32ay/53/

I noticed that if I remove all the max, min, tickInterval, pointStart and pointInterval properties the markers are aligned correctly, but the chart doesn't expand its full available width.

margin and spacing chart properties seem to affect the chart as a whole, and not the plotted area.

Any thoughts?

ppotaczek ppotaczek · Accepted Answer · 2019-12-06T17:07:40

The padding is caused by combined tickInterval and endOnTick: true, to remove it just disable endOnTick.
To position the labels in a different way use align, x and y properties.

xAxis: {
    labels: {
        align: 'center',
        y: 30,
        formatter: function() {
            return Highcharts.dateFormat('%e %b', this.value);
        },
        rotation: -45
    },
    title: undefined,
    type: 'datetime',
    min: lastSunday - (weekLength * (data.length - 1)),
    max: lastSunday,
    tickInterval: weekLength,
    endOnTick: false,
    minorTickInterval: weekLength
}

Live demo: https://jsfiddle.net/BlackLabel/eLbp48d3/

API Reference:

https://api.highcharts.com/highstock/xAxis.labels.align

https://api.highcharts.com/highstock/xAxis.endOnTick

Highcharts: align markers with xAxis

1 Answers