Chart Range Area I
Chart Range Area I
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: "Volume VS Temperature for Mercury"
                },
                tooltipSettings: {
                    axisMarkers: {
                        enabled: true,
                        mode: 'x',
                        width: 1,
                        zIndex: 3
                    }
                },
                chartLegend: {
                    align: 'center',
                    verticalAlign: 'top'
                },
                exportOptions: {
                    image: false,
                    print: false
                },
                axisX: {
                    categoricalValues: ["0.073554", "0.0736877", "0.0738215", "0.0739552", "0.0740891", "0.0747594", "0.0754334", "0.0761128", "0.0767996"],
                    title: {
                        text: "ml/gr"
                    }
                },              
                axisY: {
                    min: 0,                    
                    max: 300
                },              
                dataSeries: [                   
                    {
                        seriesType: 'rangearea',
                        collectionAlias: "Temperature Ranges",
                        applyAnimation: false,
                        data: [[0, 9], [10, 19], [20, 29], [30, 39], [40, 89], [90, 139], [140, 189], [190, 239], [240, 289]]
                    }               
                ]
            });
        });
    </script>

</body>