Chart Bar XIV
Chart Bar XIV
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",
                axisX: {
                    categoricalValues: [
                        "0", "5", "10", "15", "20", "25", "30", "35", "40", "45", "50",
                        "55", "60", "65", "70", "75", "80", "85", "90", "95", "100+"
                    ]
                },
                axisY: {
                    title: {
                        text: "Population growth"
                    },
                    min: -4000000,
                    max: 4000000
                },
                primaryHeader: {
                    text: "Population statistics"
                },
                seriesSettings: {
                    bar: {
                        stackMode: "normal"
                    }
                },
                dataSeries: [{
                    collectionAlias: "Male",
                    data: [-1746181, -1884428, -2089758, -2222362, -2537431, -2507081, -2443179,
                        -2664537, -3556505, -3680231, -3143062, -2721122, -2229181, -2227768,
                        -2176300, -1329968, -836804, -354784, -90569, -28367, -3878]
                }, {
                    collectionAlias: "Female",
                    data: [1656154, 1787564, 1981671, 2108575, 2403438, 2366003, 2301402, 2519874,
                        3360596, 3493473, 3050775, 2759560, 2304444, 2426504, 2568938, 1785638,
                        1447162, 1005011, 330870, 130632, 21208]
                }]
            });
        });
    </script>

</body>