Chart Polar Bar II
Chart Polar Bar II

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",
                exportOptions: {
                    image: false,
                    print: false
                },
                seriesSettings: {
                    polarbar: {
                        stackMode: "normal"
                    }
                },
                axisX: {
                    categoricalValues: [
                        "1952", "1956", "1960", "1964", "1968", "1972", "1976",
                        "1984", "1988", "1992", "1996", "2000", "2004", "2008", "2012"
                    ]
                },
                primaryHeader: {
                    text: "Olympic Medals won by USA"
                },
                chartLegend: {
                    align: "center",
                    verticalAlign: "top"
                },
                dataSeries: [{
                    seriesType: "polarbar",
                    collectionAlias: "Gold Medals",
                    data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46]
                }, {
                    seriesType: "polarbar",
                    collectionAlias: "Silver Medals",
                    data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29]
                }, {
                    seriesType: "polarbar",
                    collectionAlias: "Bronze Medals",
                    data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29]
                }]
            });
        });
    </script>

</body>