Chart Bar IX
Chart Bar IX
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">
     $(document).ready(function () {
         $("#chart").devuiChart({
             theme: "light",
             exportOptions: {
                 image: false,
                 print: false
             },
             seriesSettings: {
                 bar: {
                     stackMode: "normal"
                 }
             },
             axisX: {
                 categoricalValues: [
                     "1952", "1956", "1960", "1964", "1968", "1972", "1976",
                     "1984", "1988", "1992", "1996", "2000", "2004", "2008", "2012"
                 ]
             },
             primaryHeader: {
                 text: "Number of Medals"
             },
             dataSeries: [{
                 seriesType: "bar",
                 collectionAlias: "USA",
                 data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
                 stackIndex: 1
             }, {
                 seriesType: "bar",
                 collectionAlias: "Canada",
                 data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
                 stackIndex: 1
             }, {
                 seriesType: "bar",
                 collectionAlias: "Russia",
                 data: [18, 23, 21, 12, 34, 22, 56, 31, 15, 16, 18, 24, 10, 15, 13],
                 stackIndex: 2
             },
             {
                 seriesType: "bar",
                 collectionAlias: "Germany",
                 data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
                 stackIndex: 2
             }]
         });

     });
</script>

</body>