Chart.js Sample: Polar Area Chart

Polar area charts are similar to pie charts, but each segment has the same angle – the radius of the segment differs depending on the value.

This type of chart is often useful when we want to show a comparison data similar to a pie chart, but also show a scale of values for context.

The following Polar Area Chart, drawn by Chart.js library:

Using our plugin, named Blazing Charts, I added the following shortcode to this post:

(left-bracket)BlazingChart charttype="chartjs" source="chart-js-sample-1"(right bracket)

The first parameter specifies which charting library is used. The second parameter is the slug of a Custom Post Type, named Chart Snippets, introduced by that plugin.

The source of the script for the drawing is added as plain text to a Chart Snippet. The content of the chart snippet for the above chart is as following:

<div id="canvas-holder" style="width:30%; direction: ltr; margin-left:auto;margin-right:auto;display:table;">
	<canvas id="chart-area" width="300" height="300"/>
</div>
<script>
var polarData = {
    labels: [
        "Red",
        "Green",
        "Yellow",
        "Grey",
        "Dark Grey"
    ],
    datasets: [
        {
            data: [300, 50, 100, 40, 120],
            backgroundColor: [
                "#F7464A",
                "#46BFBD",
                "#FDB45C",
                "#949FB1",
                "#4D5360"
            ],
            hoverBackgroundColor: [
                "#FF5A5E",
                "#5AD3D1",
                "#FFC870",
                "#A8B3C5",
                "#616774"
            ]
        }]
};


window.onload = function(){
	var ctx = document.getElementById("chart-area").getContext("2d");

    window.myPolarArea = new Chart(ctx, {
        type: 'polarArea',
        data: polarData,
        options: {
            responsive: true,
            elements: {
                arc: {
                    borderColor: "#000000"
                }
            }
         },
        animation:{
            animateScale: true
        }
    });
};
</script>