HighStock "xRange" chart is not working with older version library(HighStock)

Question

I have implemented xRange chart with latest HighStock library (Highstock JS v6.1.1) and it works absolutely fine but in my project we are using older version of library as ("https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highstock-all.js") and that does not work.

Note: I don't want to upgrade the library since it will have major impact on other existing charts.

My xRange chart working fiddle here: please refer

xRange chart with Older version of library NOT working fiddle here: please refer

Can anyone please help. Thanks

---

<script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/2.1.7/highstock-all.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

---

Highcharts.stockChart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Admission Timeline'
    },    
    xAxis: {
       type: 'datetime',
       min: Date.UTC(2017, 6, 17, 16, 00), 
       max: new Date().getTime()      
    },
    yAxis: {
        title: {
            text: 'Admission'
        },
        id:'123445567',
        categories: ['Admission'],
        reversed: true,
        opposite: false,
        labels: {
                 x: -3,
                 align: "right", 
                 style: {
                           color: "#595959",
                           font: "13px Calibri, sans-serif"
                      }
         },
         title: {           
                        text: "",
                        textAlign: "right",
                        rotation: 0,
                        margin: 60,
                        style: {
                            color: "rgb(124, 97, 114)",
                            font: "15px Calibri, sans-serif",
                            fontWeight: "bold"
                        }
         },
         offset: 0,
         lineWidth: 0,
         timeline: true
    },
    tooltip: {
            split: false,
        formatter () {
          const x1 = Highcharts.dateFormat('%Y-%m-%d', this.x)
          const x2 = Highcharts.dateFormat('%Y-%m-%d', this.x2)
          const header = `<span style="font-size:10px">${x1} - ${x2}</span><table>`   
          const body = `<tr>
                  <td style="color:${"#FF0000"};padding:0">${this.series.name} </td>
            </tr><tr>
                  <td style="color:${"#808000"};padding:0"><b>Disease: Allergy</b></td>
            </tr>`      
          const footer = '</table>'      
          return header + body + footer
    },
    useHTML: true
    },
    series: [{
        name: 'Name: XYZ',        
        data: [{
            x: 1504310400000,
            x2: 1506124800000,
            y: 0,            
            partialFill: 0.20,
            color: "#00FF00"
        },{
            x: Date.UTC(2017, 09, 04),
            x2: Date.UTC(2017, 09, 30),
            y: 0,           
            partialFill: 0.05
        },{
            x: Date.UTC(2017, 11, 14),
            x2: Date.UTC(2017, 11, 24),
            y: 0,           
            partialFill: 0.05,
            color: "#E77471"
        },{
            x: Date.UTC(2018, 01, 05),
            x2: Date.UTC(2018, 01, 21),
            y: 0,           
            partialFill: 0.02
        }] ,                
        yAxis: 0,       
                title: "series Title", 
        color:'gray',            
        borderColor: 'gray',
        pointWidth: 20,       
        timeline: true,
        type: "xrange",           
        dataLabels: {
            enabled: true,
            x: 1,
            y: 24,
            borderWidth: 2,
            padding: 5,
            shadow: false,
            style: {
                 fontFamily: "Calibri",
                 color: "#FFFFFF",
                 textShadow: "none",
                 fontSize: "11px",
                 fontWeight: "normal",
                 cursor: "default"
            }
        }
    }]
});

Answer 1

Without some serious modification to your highstock.js, you will probably not be able to make xRange work with Highstock pre 6.0.0, as that is when support for xRange was added. You can see this in the changelog(under 6.0.0), and in the plotOptions where it denotes the version something was added, in the top right corner of that element(if you scroll down to the bottom, you will see it says Since 6.0.0 on xRange).