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"/>
var polarData = {
    labels: [
        "Dark Grey"
    datasets: [
            data: [300, 50, 100, 40, 120],
            backgroundColor: [
            hoverBackgroundColor: [

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"
            animateScale: true

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.