Time Chart - using thresholds to highlight extreme value changes

<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<div id="demo"></div>

//No CSS for this example 

    function success(data) {
        data.dataLimitFrom = 0;
        data.dataLimitTo = 0;
        for (var i in data.values) {
            if (data.dataLimitFrom == 0) {
                data.dataLimitFrom = data.values[i][0];
            }
            data.dataLimitFrom = data.dataLimitFrom > data.values[i][0] ? data.values[i][0] : data.dataLimitFrom;
            data.dataLimitTo = data.dataLimitTo < data.values[i][0] ? data.values[i][0] : data.dataLimitTo;
        }
        t = new TimeChart(
                {
                    container: document.getElementById("demo"),
                    data:
                    {
                        units: ["d"],
                        preloaded: data
                    },
                    valueAxisDefault: { title: "Value, $" },
                    valueAxis: {
                        secondary: {
                            title: "Volume",
                            side: "right",
                            position: "outside",
                            thresholds: [
                                {
                                    from: 20000000,
                                    position: "above",
                                    style: {
                                        lineWidth: 1,
                                        fillColor: "rgba(255,255,255,0.7)",
                                        lineColor: "red",
                                        lineDash: [3, 3]
                                    }
                                }
                            ]
                        }
                    },
                    series: [
                        {
                            name: "Volume, avg",
                            id: "series3",
                            data: {
                                index: 5,
                                aggregation: "avg"
                            },
                            style: {
                                lineWidth: 1,
                                marker: {
                                    shape: "circle",
                                    width: 4,
                                    fillColor: "rgba(100,200,255,0.8)"
                                }
                            },
                            valueAxis: "secondary"
                        }
                    ],
                    navigation: {
                        initialDisplayUnit: "1 d",
                        initialDisplayPeriod: "8 M",
                        initialDisplayAnchor: "newestData"
                    },
                    currentTime: { enabled: false }
                }
        );
    }
    // using a custom library to load CSV data
    loadCSV("/dvsl/data/time-chart/yahoo-stocks.csv", "d", [
        { type: "date", format: "([0-9]+)\/([0-9]+)\/([0-9]+)", fields: [3, 1, 2] },
        { type: "decimal" },
        { type: "decimal" },
        { type: "decimal" },
        { type: "decimal" },
        { type: "decimal" }
    ], ",", success);

//Data too large to output