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: 10},
{x: 10, y:500,},
{x: 15, y:500000,},
{x: 20, y: 2},
            ];
            
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",
            color: "black",
            markerColor: "black",
            toolTipContent: "<span style='\"'color: {color}};'\"'>{x}: {y}</span>",
            dataPoints: dps
        }
    ]
})
chart.render();

function calculateThreshold(){  // Calculates the Thresold value for the individual stacked charts(blue, yellow, red) 
var max = 0;
	for(var i = 0; i < dps.length; i++)
  	if(dps[i].y > max){
    	max = dps[i].y;	
    }
    thresoldValue = 0.10 * max;
    return(thresoldValue);
}


chart.axisX[0].set("maximum", chart.data[4].dataPoints[chart.data[4].dataPoints.length - 1].x);

for (var i = 0; i < chart.data[4].dataPoints.length; i++) {

    chart.options.data[0].dataPoints.push({
        x: chart.data[4].dataPoints[i].x,
        y: calculateThreshold(),
        highlightEnabled: false,
        markerSize: 0,
        toolTipContent: null
    });
    chart.options.data[1].dataPoints.push({
        x: chart.data[4].dataPoints[i].x,
        y:...