Chart Polar Area II
Chart Polar Area II
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",
                primaryHeader: {
                    text: "Rainfall vs Temperature"
                },
                seriesSettings: {
                    polararea: {
                        pointMark: {
                            enabled: true
                        }
                    }
                },
                chartLegend: {
                    align: "center",
                    verticalAlign: "top"
                },
                axisX: {
                    categoricalValues: ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
                },
                dataSeries: [{
                    seriesType: 'polararea',
                    collectionAlias: "Avg temperature C",
                    data: [22, 23, 24, 22, 24, 27, 30, 32, 27, 25, 24, 23]
                }, {
                    seriesType: 'polararea',
                    collectionAlias: "Avg rainfall",
                    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855, 5.8, 4.34]
                }]
            });
        });
    </script>

</body>