javascript - Plot Bar chart and Line series chart on separate x-axis in Highcharts out of common dataset -

i got common dataset both line series , bar graph . in other words dataset consists both line series dataset , bar graph dataset. want plot line series graph on separate x-axis , bar graph on separate x-axis. , want control them both same frame. both tooltip both should come in same popup, same section can show , hide them. attached screenshot , sharing same x-axis. want separate them. here piece of code.

for(j=0; j<timelinejson.length; j++){       seriesoptions[j] = {             //name: selectedmarkers[i],             name: timelinejson[j].marker_desc,             data: mdata,              marker : {                 enabled : true,                 radius : 3             },             type : 'spline',             tooltip : {                 valuedecimals : 2             }         };    }         seriesoptions[10] = {             name: 'speed',             data: [[1372636800000, 0.16], [1375315200000, 0.36], [1377993600000, 0.4], [1380585600000, 0.68], [1383264000000, 0.6], [1385856000000, 0.64], [1388534400000, 0.68], [1391212800000, 0.69], [1393632000000, 0.71], [1396310400000, 0.73], [1398902400000, 0.74], [1401580800000, 0.75], [1404172800000, 0.76], [1406851200000, 0.17], [1409529600000, 0.67], [1412121600000, 0.18], [1414800000000, 0.58], [1417392000000, 0.28], [1420070400000, 0.58], [1422748800000, 0.49], [1425168000000, 0.39], [1427846400000, 0.29], [1430438400000, 0.59], [1433116800000, 0.19]],              type: 'column',             valuedecimals: 1          };   drawtrend(seriesoptions,temp) function drawtrend(marker_array_main,temp) {    $('#trendchart'+temp).highcharts('stockchart', {          chart: {                     height: 400                     //width: 500                     },                       rangeselector: {                     selected: 4                 },                  yaxis: {                     /*labels: {                         formatter: function () {                             return (this.value > 0 ? ' + ' : '') + this.value + '%';                         }                     },*/                     plotlines: [{                         value: 0,                         width: 2,                         color: 'silver'                     }]                 },                 legend: {                     enabled: true,                     align: 'right',                     verticalalign: 'top',                     layout: 'vertical',                     x: 0,                     y: 100                 },                 tooltip: {                     pointformat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>',                     valuedecimals: 2                 },                  series: marker_array_main              }); 

}

i think can use multiple yaxis in case of chart. can add many yaxes want , can connect series axes using yaxis:x parameter in series object.

x value index of specific axis in yaxis array.

        yaxis: [{             labels: {                 align: 'right',                 x: -3             },             title: {                 text: 'ohlc'             },             height: '60%',             linewidth: 2         }, {             labels: {                 align: 'right',                 x: -3             },             title: {                 text: 'volume'             },             top: '65%',             height: '35%',             offset: 0,             linewidth: 2         }],           series: [{             type: 'column',             name: 'volume',             data: volume,             yaxis: 1,             datagrouping: {                 units: groupingunits             }         }] 

here can find simple example of kind of chart highcharts demos:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/