How to add another series into my highchart

Question

I have a Tornado chart like the one below: This chart has a baseline at 29.5, and it's fiddle is here.

series:[{
    name: 'Low',
    grouping:false,
    type:'bar',        
    data:[
        {y:12.15-baseValue, label:10},
        {y:15.45-baseValue, label:1},
        {y:31.25-baseValue, label:2},
        {y:12.15-baseValue, color:'#99CCFF', label: ""},
    ],
    labels:[10,5,1,2,]
},{
    name: 'High',
    grouping:false,
    type:'bar',
            data:[
            {y:46.86-baseValue, label:30},
            {y:42.28-baseValue, label:3},
            {y:27.77-baseValue, label:4},
            {y:46.86-baseValue, color:'#99CCFF', label:""},
           ],
    labels:[30,10,3,4,]
},
{
    name: 'Median',
    type: 'scatter',
    data: [
            null,
            null,
            null,
            27-baseValue
           ],
    marker: {
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[3],
        fillColor: 'white'
    }
}]  

I am trying to add a shadow chart of a second Tornado, where the baseline can be different. For instance, consider four more bars, shifted to the right, in the mockup shown below:

I have been stuck at this because the shadow bars only show relative to the baseValue of the first chart (29.5), and not to the baseValue of the second chart (39.5). So if I try to add them into the existing series, they will work only if the values are in the same direction (as in value-baseValue has the same sign as the original data).

To illustrate, suppose the shadow chart has the following data:

• Annual Revenue: 25, 39.5, 55
• Number of Years: 33, 39.5, 48
• Annual Costs: 35, 39.5, 48
• Combined Uncertainty: 23,43,55

How do I add this to the code in the fiddle above and make it look like the mockup? Here is a modified fiddle that does not work.

series:[{
    name: 'Low',
    grouping:false,
    type:'bar',        
    data:[
        {y:12.15-baseValue, label:10},
        {y:25-baseValue, label:50},
        {y:15.45-baseValue, label:1},
        {y:33-baseValue, label:20},
        {y:31.25-baseValue, label:2},
        {y:48-baseValue, label:8},
        {y:12.15-baseValue, color:'#99CCFF', label: ""},
        {y:40-baseValue, color:'#99DDDD', label: ""}
    ],
    labels:[10,50,1,20,2,8]
},{
    name: 'High',
    grouping:false,
    type:'bar',
            data:[
            {y:46.86-baseValue, label:30},
            {y:55-baseValue, label:70},
            {y:42.28-baseValue, label:3},
            {y:48-baseValue, label:30},
            {y:27.77-baseValue, label:4},
            {y:35-baseValue, label:5},
            {y:46.86-baseValue, color:'#99CCFF', label:""},
            {y:80-baseValue, color:'#99DDDD', label: ""}
           ],
    labels:[30,70,3,30,4,5,]
},
{
    name: 'Median',
    type: 'scatter',
    data: [
            null,
            null,
            null,
            null,
            null,
            null,
            27-baseValue,
            60-baseValue
           ],
    marker: {
        lineWidth: 2,
        lineColor: Highcharts.getOptions().colors[3],
        fillColor: 'white'
    }
}]  

The problems are annotated in the image below:

Answer 1

If you want to have point with 0/origin in different position that rest of series - then instead you should use different series and add hidden another horizontal axis (in your code it will be y-axis because of invert caused by bar charts). To synchronize those axes you can set proper max and min on axes. Example: http://jsfiddle.net/frgo4Lun/3/

OR You can use threshold http://api.highcharts.com/highcharts#plotOptions.bar.threshold. Example: http://jsfiddle.net/frgo4Lun/4/

You have also posted image with series on between of ticks. You can set x position of point to not round values like 1.5. Example: http://jsfiddle.net/frgo4Lun/5/