CODEWITHSUNDEEP
javascripthighcharts
AAron
AAron

Reputation: 438

Align xAxis across line/column charts

I cannot get my common datetime xAxis to visually line up across line and column charts. I want the crosshairs to move in lockstep.

Here are line and column charts with synchronized crosshairs to demonstrate:

https://jsfiddle.net/aadhoc331/9xodqw4u/

(Note: I'm actually using current version of Highstock, but the fiddle is a minimal example)

Obligatory code (go to fiddle instead):

$('<div class="chart">')
    .appendTo('#container')
    .highcharts({
        title: {
            text: 'Chart A',
        },
        chart: {
            type: 'line'
        },
        xAxis: {
            type: 'datetime',
            crosshair: true,
        },
        yAxis: {
            title: {
                text: undefined
            },
            labels: {
                enabled: false,
            },
        },
        series: [
            {
                name: 'Line',
                type: 'line',
                data: [
                    [1072915200000, 8000],
                    [1104537600000, 9000],
                    [1136073600000, 10000],
                    [1167609600000, 11000],
                    [1199145600000, 12000],
                    [1230768000000, 13000],
                    [1262304000000, 14000],
                    [1293840000000, 15000],
                ]
            }
        ]
    });

$('<div class="chart">')
    .appendTo('#container')
    .highcharts({
        title: {
            text: 'Chart B',
        },
        chart: {
            type: 'column'
        },
        xAxis: {
            type: 'datetime',
            crosshair: true,
        },
        yAxis: {
            title: {
                text: undefined
            },
            labels: {
                enabled: false,
            },
        },
        plotOptions: {
            column: {
                stacking: 'normal',
            }
        },
        series: [
            {
                type: 'line',
                name: 'The Line',
                data: [
                    [1072915200000, 800],
                    [1104537600000, 900],
                    [1136073600000, 1000],
                    [1167609600000, 1100],
                    [1199145600000, 1200],
                    [1230768000000, 1300],
                    [1262304000000, 1400],
                    [1293840000000, 1500],
                ]
            },
            {
                type: 'column',
                name: 'The Columns',
                data: [
                    [1072915200000, 800],
                    [1104537600000, 900],
                    [1136073600000, 1000],
                    [1167609600000, 1100],
                    [1199145600000, 1200],
                    [1230768000000, 1300],
                    [1262304000000, 1400],
                    [1293840000000, 1500],
                ]
            }
        ]
    });

Upvotes: 1

Views: 107

Answers (1)

morganfree
morganfree

Reputation: 12472

Set xAxis' minPadding, maxPadding properties:

 xAxis: {
            type: 'datetime',
            crosshair: true,
            minPadding: 0.08,
            maxPadding: 0.08
        }

https://jsfiddle.net/9xodqw4u/1/

Be advised that if you use a navigator you would need a different approach - navigator sets extremes and padding is reset.

Upvotes: 1

Related Questions