Chart Bar VIII
Chart Bar 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 class="theme-light">

<div id="chart"></div>
<script type="text/javascript">
    $(function () {
        $("#chart").devuiChart({
            theme: "light",
            primaryHeader: {
                text: "Internet usage statistics"
            },
            axisX: {
                categoricalValues: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
            },
            axisY: {
                title: {
                    text: "Visitor statistics"
                }
            },
            exportOptions: {
                image: false,
                print: false
            },
            dataSeries: [
            {
                seriesType: 'bar',
                collectionAlias: "Total Visits",
                data: [
                    565000, 630400, 743000, 910200, 1170200, 1383000
                ],
                divideSeries: false
            },
            {
                seriesType: 'bar',
                barOffset: 0.2,
                collectionAlias: "Unique Visits",
                data: [
                    152000, 234000, 123000, 348000, 167000, 283000
                ]
            }
            ]
        });
    });
</script>

</body>