Chart Range Area III
Chart Range Area 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",
                primaryHeader: {
                    text: "Currency rates"
                },
                tooltipSettings: {
                    axisMarkers: {
                        enabled: true,
                        mode: 'x',
                        width: 1,
                        zIndex: 3
                    }
                },
                chartLegend: {
                    align: 'center',
                    verticalAlign: 'top'
                },
                axisX: {
                    axisType: 'datetime'
                },
                dataSeries: [
                    {
                        seriesType: 'rangearea',
                        collectionAlias: "USD/EUR low/high values",
                        dataStart: Date.UTC(2013, 4, 5),
                        tooltipSettings: {
                            customPointText: 'Low:<b>{point.low}</b><br/>High:<b>{point.high}</b>'
                        },
                        dataStep: 24 * 3600 * 1000, // one day
                        applyAnimation: false,
                        data: [
                            [1.3147, 1.3254], [1.3161, 1.3300], [1.3262, 1.3416], [1.3326, 1.3416], [1.3318, 1.3381], [1.3343, 1.3358], [1.3296, 1.3374], [1.3279, 1.3391],
                            [1.3267, 1.3359], [1.3233, 1.3318], [1.3177, 1.3270], [1.3187, 1.3222], [1.3193, 1.3285], [1.3075, 1.3306], [1.3054, 1.3116], [1.3042, 1.3101],
                            [1.2956, 1.3108], [1.2985, 1.3000], [1.2945, 1.3049], [1.2934, 1.3061], [1.2837, 1.2976], [1.2841, 1.2950], [1.2915, 1.2949], [1.2934, 1.2943],
                            [1.2905, 1.2994], [1.2821, 1.2956], [1.2834, 1.2998]
                        ]
                    }
                ]
            });
        });
    </script>

</body>