Chart Area V
Chart Area V
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: "Browser usage per year"
                },
                seriesSettings: {
                    area: {
                        stackMode: "normal"
                    }
                },
                exportOptions: {
                    image: false,
                    print: false
                },
                axisX: {
                    categoricalValues: ["2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"]
                },
                dataSeries: [{
                    seriesType: "area",
                    collectionAlias: "Chrome",
                    data: [0, 0, 0, 0, 3.6, 9.8, 22.4, 34.6]
                }, {
                    seriesType: "area",
                    collectionAlias: "Firefox",
                    data: [0, 23.6, 29.9, 36.3, 44.4, 46.4, 43.5, 37.7]
                }, {
                    seriesType: "area",
                    collectionAlias: "Internet Explorer",
                    data: [76.2, 68.9, 60.6, 56.0, 46.0, 37.2, 27.5, 20.2]
                }, {
                    seriesType: "area",
                    collectionAlias: "Mozilla",
                    data: [16.5, 2.8, 2.5, 1.2, 0, 0, 0, 0]
                }, {
                    seriesType: "area",
                    collectionAlias: "Opera",
                    data: [1.6, 1.5, 1.5, 1.6, 2.4, 2.3, 2.2, 2.5]
                }, {
                    seriesType: "area",
                    collectionAlias: "Safari",
                    data: [0, 0, 0, 1.8, 2.7, 3.6, 3.8, 4.2]
                }]
            });
        });
    </script>
</body>