Chart Area VIII
Chart Area VIII
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>
<div id="chart"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#chart").devuiChart({
            theme: "light",
            primaryHeader: {
                text: "rainfall vs temperature"
            },
            seriesSettings: {
                area: {
                    pointMark: {
                        enabled: true
                    }
                }
            },
            axisX: {
                categoricalValues: ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
            },
            dataSeries: [{
                seriesType: "area",
                collectionAlias: "Avg temperature",
                data: [48, 50, 55, 64, 73, 79, 82, 83, 80, 70, 61, 53]
            }, {
                seriesType: "area",
                collectionAlias: "Avg rainfall",
                data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855, 2.8, 1.34]
            }],
            events: {
                legendSeriesClick: function (e) {
                    // stop the series item click event, so that 
                    // user clicks do not toggle visibility of the series
                    e.preventDefault();
                }
            }
        });
    });
</script>
</body>