Chart Range Area II
Chart Range Area II
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: "Range Earnings by Quarter"
                },             
                tooltipSettings: {
                    axisMarkers: {
                        enabled: true,
                        mode: 'x',
                        width: 1,
                        zIndex: 3
                    }
                },
                chartLegend: {
                    align: 'center',
                    verticalAlign: 'top'
                },
                axisX: {
                    categoricalValues: ["Q1", "Q2", "Q3", "Q4", "Q5", "Q6", "Q7", "Q8", "Q9"]
                },              
                dataSeries: [                   
                    {
                        seriesType: 'rangearea',                       
                        collectionAlias: "Revenue min/max",                       
                        applyAnimation: false,                       
                        tooltipSettings: {
                            customPointText: 'Low Revenue: <b>{point.low}</b><br/>High Revenue:<b>{point.high}</b>'
                        },                       
                        data: [[1200000, 2000000], [1700000, 2000000], [200000, 700000], [197000, 360000], [140000, 1500000], [900000, 1390000], [780000, 900000], [500000, 800000], [770000, 1000000]]
                    },                    
                    {
                        seriesType: 'line',
                        collectionAlias: "Advertising Expenditures",                        
                        applyAnimation: false,                        
                        data: [190000, 700000, 300000, 345000, 500000, 370000, 420000, 700000, 200000]
                    }]
            });
        });
    </script>

</body>