Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?

Question

I found this:

http://jsfiddle.net/tungwaiyip/F3pts/6/

But that’s not what I want. I need to have something similar but with the charts sharing the x-axis.

        top: 300;

The above setting in the yAxis does the trick on the y axis but I can't see anything like that for the x-axis.

Is it possible in highcharts to have 2 charts, sharing the same x-axis, but next to one another?

Here is my fiddle: http://jsfiddle.net/PcWSu/

Answer 1

You can go through this fiddle where in you can see shared tooltip with multiple X and Y axis. Hope this will help.

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Shared tooltip chart'
        },
        xAxis: [{
            type: 'datetime',
            id: 'x1'
        }, {
            type: 'datetime',
            id: 'x2',
            opposite: true
        }],
        yAxis: {
            min: 0
        },
        tooltip: {
            shared: true,
            useHTML: true,
            formatter: function () {
                var tooltip = '';
                var i, len;
                tooltip += '<small>Apple</small>';
                tooltip += '<table>';
                for (i = 0, len = 4; i < len; i++) {
                        if(this.points[i] != undefined){
                if(this.points[i].series.name.indexOf('Apple') >= 0){
                    tooltip += '<tr>';
                    tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
                    tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
                    tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
                    tooltip += '</tr>';
                    }
                    }
                }
                tooltip += '</table>';
                tooltip += '<small>Mango</small>';
                tooltip += '<table>';
                for (i = 0, len = 4; i < len; i++) {
                        if(this.points[i] != undefined){
                if(this.points[i].series.name.indexOf('Mango') >= 0){
                    tooltip += '<tr>';
                    tooltip += '<td style="color: ' + this.points[i].series.color + '">\u25CF</td>';
                    tooltip += '<td>' + Highcharts.dateFormat('%Y-%m-%d', this.points[i].x) + ':</td>';
                    tooltip += '<td style="text-align: right"><b>' + this.points[i].y + '</b></td>';
                    tooltip += '</tr>';
                    }
                    }
                }
                tooltip += '</table>';
                return tooltip;
            }
        },
        series: [{
            name: 'Apple',
            id: 'series1',
            xAxis: 'x1',
            color: 'rgba(255, 0, 0, 1.0)',
            data: [5, 3, 4, 7, 6, 1, 0],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 10)
        }, {
            name: 'Apple New',
            id: 'series2',
            //linkedTo: 'series1',
            xAxis: 'x2',
            color: 'rgba(255, 180, 180, 1.0)',
            data: [4, 5, 5, 6, 1, 3, 4],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 17)
        },{
            name: 'Mango',
            id: 'series3',
            xAxis: 'x1',
            color: 'rgba(255, 0, 0, 1.0)',
            data: [15, 13, 14, 17, 16, 11, 10],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 10)
        }, {
            name: 'Mango New',
            id: 'series4',
            //linkedTo: 'series1',
            xAxis: 'x2',
            color: 'rgba(255, 180, 180, 1.0)',
            data: [14, 15, 15, 16, 11, 13, 14],
            pointInterval: 1000 * 60 * 60 * 24,
            pointStart: Date.UTC(2015, 2, 17)
        }]
    });
});

Answer 2

The same properties you can use for xAxis (top, left, width, height), see: http://jsfiddle.net/F3pts/7/

xAxis: [{
    gridLineWidth: 1,
    width :150
}, {
    offset: 0,
    gridLineWidth: 1,
    width :150,
    left: 230
}],