Is it possible to have more than two panes in HighStock chart?

Question

I would like to be able to plot a chart data which has the usual Open High low and Close plus the Volumes and Open Interest. These are to be represented in 3 panes: Pane 1: Open High Low Close Pane 2: Volumes Pane 3: Open Interest.

The 'Two Panes, Candlesticks and Volumes' example from HighCharts (highStock) only deals with Pane 1 and 2. So the question is if possible to plot a third pane under the Volumes pane where I can have my Open Interest Bars? Thanks

Answer 1

Yes, this is possible - just add more axis like in example you mentioned.

Answer 2

I am also trying to have 3 or more pane in highstock but facing an issue with scrollbar.The scrollbar is in sync with first chart only and it'snot in sync with rest of the two charts. The code is as below:

$(function () {
$('#container').highcharts('StockChart', {



        rangeSelector : {
                buttons : [],
                inputEnabled : false
            },credits : {
                enabled : false
            },tooltip: {
                formatter: function () {
                        var series = this.series;
                        if(null != series){
                            if(null != this.point.custom){
                                return Highcharts.dateFormat('%A %b %d %H:%M:%S',
                                        new Date(this.x)) + '<br> ' + "<b> Alarm Criticality : </b>" +this.point.custom;
                            }                   

                            return Highcharts.dateFormat('%A %b %d %H:%M:%S',
                                    new Date(this.x)) + '<br> ' + "<b> Severity : </b>" +this.y;                        
                        }else {
                            return Highcharts.dateFormat('%A %b %d %H:%M:%S',
                                    new Date(this.x)) + '<br> ' + "<b> Health : </b>" +this.y;      
                        }
                    }
                },

            yAxis: [
                  {
                    opposite : false,
                    min: 10,                       
                    labels: {
                         enabled: false
                     },
                    title: {
                        text: 'Alarm'
                    },
                    top: 0,
                    height: '25%',
                    offset: 0,
                    lineWidth: 2
                },{
                    opposite : false,
                    min: 0,
                    //max: 100,
                    labels: {
                        align: 'left',
                        x: -5
                    },
                    title: {
                        text: 'Health'
                    },
                    top: '15%',
                    height: '25%',
                    offset: 0,
                    lineWidth: 2
                },{
                    opposite : false,
                    min: 0,
                    max:10,
                    labels: {
                        align: 'left',
                        x: -5
                    },
                    title: {
                        text: 'Anomaly Score'
                    },
                    top: '50%',
                    height: '25%',
                    offset: 0,
                    lineWidth: 2
                }
            ],

            series: [
               {
                type: 'scatter',
                name: 'Alarm',
                cursor: 'pointer',
                id: 'alarm',
                data: data :[someData],
                 turboThreshold: 3600,
                yAxis: 0                        

            },{
                name : 'Health',
                data :[someData], 
                yAxis: 1,
                type : 'areaspline',
                id: "health",
                fillColor : {
                    linearGradient : {
                        x1 : 0,
                        y1 : 0,
                        x2 : 0,
                        y2 : 1
                    },
                    stops : [
                            [
                                    0, Highcharts.getOptions().colors[ 0 ]
                            ], [
                                    1, Highcharts.Color( Highcharts.getOptions().colors[ 0 ] ).setOpacity( 0 ).get( 'rgba' )
                            ]
                    ]
                }
            },{
                type: 'scatter',
                name: 'Anomaly Score',
                data: data :[someData],
                yAxis: 2,
                id : 'anomalies',
                lineWidth : 0,
                marker : {
                    enabled : true,
                    radius : 4, 
                    symbol: 'circle',
                    fillColor:'#8EBCEB'                      
                }                

            }  
            ]


});

});