Chart Bar XIII
Chart Bar XIII
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: ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"]
                },
                axisY: {
                    title: {
                        text: "Percentage statistics"
                    }
                },
                primaryHeader: {
                    text: "Gross domestic product growth /GDP annual %/"
                },
                dataSeries: [{
                    seriesType: "bar",
                    collectionAlias: "India",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
                }, {
                    seriesType: "bar",
                    collectionAlias: "Russian Federation",
                    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
                }, {
                    seriesType: "bar",
                    collectionAlias: "Germany",
                    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
                }]
            });
        });
    </script>

</body>