Showing threshold using Multi-series stacked area chart inside a parent line chart - CanvasJS JavaScript Charts

Showing threshold using Multi-series stacked area chart inside a parent line chart - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dps = [             	
                { x: 5, y: 0 ,budget: 0, warnings :0, label: '', y1: 20},
                { x: 15, y: 30 ,budget: 0, warnings :0, label: 'Jan', y1: 20},
                { x: 20, y: 15 ,budget: 0, warnings :0, label: '', y1: 20},
                { x: 25, y: 0, budget: 0, warnings :0 , label: '', y1: 20},
                { x: 30, y: 0,budget: 30, warnings :15 , label: '', y1: 40},
                { x: 40, y: 80 ,budget: 30, warnings :15, label: 'Feb', y1: 40},
                { x: 45, y: 50 ,budget: 30, warnings :15, label: '', y1: 40},
                { x: 50, y: 0 ,budget: 30, warnings :15, label: '', y1: 40},
                { x: 55, y: 0,budget: 30, warnings :15 , label: '', y1: 60},
                { x: 65, y: 500000 ,budget: 30, warnings :15, label: 'Mar', y1: 60},
                { x: 70, y: 250000 ,budget: 30, warnings :15, label: '', y1: 60},
                { x: 75, y: 0 ,budget: 30, warnings :15, label: '', y1: 60},
            ];
            
var thresoldValue = 0;            
            
var chart = new CanvasJS.Chart("chartContainer", {
    axisY: {
        gridThickness: 0
    },
    data: [{
            type: "stackedArea",
            markerSize: 0,
            color:"blue",
            lineThickness: 0,
            dataPoints: []
        },
        {
            type: "stackedArea",
            markerSize: 0,
            color:"yellow",
            lineThickness: 0,
            dataPoints: []
        }, {
            type: "stackedArea",
            color:"red",
            markerSize: 0,
            lineThickness: 0,
            dataPoints: []
        },
        {
            type: "rangeArea",
            fillOpacity: 1,
            color: "white",
            lineThickness: 0,
            markerSize: 0,
            dataPoints: []
        },
        {
            type: "line",
            //color: "transparent",
            lineColor: "transparent",
            markerSize: 0,
            markerColor: "red",
           ...