Chart Bar III
Chart Bar III
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 () {
        var posts = [
            { category: "Finance", count: 3 },
            { category: "Law", count: 13 },
            { category: "Business", count: 17 },
            { category: "Health", count: 17 },
            { category: "Sport", count: 23 },
            { category: "Celebrity", count: 17 },
            { category: "IT", count: 7, color: "red" },
            { category: "Technology", count: 12 },
            { category: "Geek", count: 5 },
            { category: "Politics", count: 7 },
            { category: "Religion", count: 17 }
        ];
        $("#chart").devuiChart({
            theme: "light",
            axisX: {
                categoricalValues: $.map(posts, function (item) {
                    return item.category;
                })
            },
            axisY: {
                title: {
                    text: "Posts per day"
                }
            },
            seriesSettings: {
                bar: {
                    dataPointText: {
                        enabled: true
                    }
                }
            },
            primaryHeader: {
                text: "Article"
            },
            dataSeries: [{
                seriesType: "bar",
                collectionAlias: "Posts per Day",
                data: $.map(posts, function (item) {
                    return {
                        y: item.count,
                        color: item.color
                    }
                })
            }]
        });
    });
</script>
</body>