Chart Range Splin III
Chart Range Splin III
View Demo

Insert it in <head>

<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />

<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>

Use Components

<body class="theme-light">

    <div id="chart"></div>
    <script type="text/javascript">
        $(function () {
            $("#chart").devuiChart({
                theme: "light",
                exportOptions: {
                    image: false,
                    print: false
                },
                tooltipSettings: {
                    customPointText: 'Low Value: <b>{point.low}</b><br/>High Value:<b>{point.high}</b>'
                },
                axisY: {
                    title: {
                        text: "Low/High Values"
                    }
                },
                tooltipSettings: {
                    axisMarkers: {
                        enabled: true,
                        mode: 'x',
                        width: 1,
                        zIndex: 3
                    }
                },
                primaryHeader: {
                    text: "Currency Low/High Values"
                },
                axisX: {
                    axisType: 'datetime'
                },
                dataSeries: [
                    {
                        seriesType: 'rangesplinearea',
                        collectionAlias: 'USD/EUR',
                        dataStart: Date.UTC(2010, 0, 1),
                        dataStep: 24 * 3600 * 1000,
                        data: [[0.75, 0.79], [0.95, 1.03], [0.70, 0.79], [0.65, 0.70], [0.5, 0.69], [0.77, 0.89], [0.79, 0.87], [0.55, 0.89], [0.65, 0.99]]
                    },
                    {
                        seriesType: 'rangesplinearea',
                        collectionAlias: 'USD/JPY',
                        dataStart: Date.UTC(2010, 0, 1),
                        dataStep: 24 * 3600 * 1000,
                        data: [[1.1363, 1.4488], [1.2272, 1.5394], [1.1174, 1.2287], [1.1177, 1.3225], [1.4150, 1.7206], [1.0159, 1.1177], [1.0137, 1.2187], [1.1148, 1.3227],
                        [1.1155, 1.3217]]
                    }
                ]
            });
        });
    </script>

</body>