Getting Started With Chart.js: Radar and Polar Area Charts

The previous tutorial of this series focused on creating line and bar charts using Chart.js. Both these charts have their own uses and configuration options that were covered in detail in the last tutorial.

In this tutorial, you will learn about two new chart types that can be created using Chart.js: radar and polar area charts. Just like the previous tutorial, we will start with a brief overview of the chart types and then move to a more detailed discussion.

Creating Radar Charts

Line and bar charts are useful when you want to compare only one or two properties of a large number of objects—for example, the population of all the countries in Asia or the number of different pollutants in the atmosphere.

Let's say you want to compare the density, opacity, viscosity, refractive index, and boiling point of only three different liquids. Creating a bar chart for this data will be problematic as you will need to create five different columns for each liquid. It will also be hard to compare the corresponding properties of the liquids.

In situations where you have to compare a lot of properties of only a few objects, creating a radar chart is the most efficient method of visualizing and comparing data. These charts are also known as spider charts.

From Wikipedia, a radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative positions and angles of the axes are typically uninformative.

Let's create our first radar chart now. Radar charts are created by setting the type key in Chart.js to radar. Here is a very basic example.

var radarChart = new Chart(marksCanvas, {
    type: 'radar',
    data: marksData,
    options: chartOptions
});

Let's plot the marks of two students of a class in five different subjects. Here is the code to provide the data for creating the chart.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [
    {
      label: "Martha",
      backgroundColor: "#FFF17644",
      borderColor: "black",
      borderWidth: 1,
      data: [65, 75, 70, 80, 60, 80]
    },
    {
      label: "Steven",
      backgroundColor: "#8E24AA44",
      borderColor: "black",
      borderWidth: 1,
      data: [54, 65, 60, 70, 90, 75]
    }
  ]
};

var chartOptions = {
  plugins: {
    title: {
      display: true,
      align: "start",
      text: "Comparing Student Performance"
    },
    legend: {
      align: "start"
    }
  },
  scales: {
    r: {
      pointLabels: {
        font: {
          size: 20
        }
      }
    }
  }
};

var radarChart = new Chart(marksCanvas, {
  type: "radar",
  data: marksData,
  options: chartOptions
});

Radar charts can have a lot of overlap, making it difficult to correctly identify the data points without any color coding. For this reason, we have assigned a color to each dataset using the backgroundColor key. Besides the background color, you can also change the border color and border width for the chart using the borderColor and borderWidth keys.

You might have also noticed that we have used r as our scale key inside the chartOptions object instead of x or y as we do in line or bar charts. This is because these types of charts have a radial axis. The following demo shows the final result of our code. As you can see, it is now very easy to compare the performance of both students in different subjects.

It is also possible for you to create dashed borders instead of continuous lines using the borderDash key. This key accepts an array as its value. The first element of the array determines the length of the dashes, and the second element determines the space between them. You can also provide an offset value for drawing the dashes using the borderDashOffset key.

You can also control the border color and width for plotted points using the pointBorderColor and pointBorderWidth keys. Similarly, you can also set a background color for different points using the pointBackgroundColor key. The size of the plotted points can be specified using the pointRadius key. You can control the distance at which the points should start interacting with the mouse using the pointHitRadius key.

You can change the appearance of the plotted points on hover using the pointHoverBackgroundColor, pointHoverBorderColor, and pointHoverBorderWidth keys. One thing that you need to remember is that these hover keys will not wait for you to actually hover over the element to get triggered. The changes will take effect as soon as you are inside the hit radius set above.

There are a lot of shapes available for plotted points. They are circular by default. However, you can change the shape to triangle, rect, rectRounded, rectRot, cross, crossRot, star, line, and dash.

Let's use all these keys to redraw the previous radar chart. Here is the code to provide configuration options for the datasets and the scales.

var marksData = {
  labels: ["English", "Maths", "Physics", "Chemistry", "Biology", "History"],
  datasets: [{
    label: "Martha",
    backgroundColor: "transparent",
    borderColor: "red",
    fill: false,
    pointRadius: 6,
    pointHitRadius: 12,
    pointBorderWidth: 3,
    pointBackgroundColor: "pink",
    pointBorderColor: "black",
    pointHoverRadius: 10,
    pointStyle: "triangle",
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Steven",
    backgroundColor: "transparent",
    borderColor: "blue",
    fill: false,
    pointRadius: 6,
    pointHitRadius: 12,
    pointBorderWidth: 3,
    pointBackgroundColor: "lightblue",
    pointBorderColor: "black",
    pointHoverRadius: 10,
    pointStyle: "rect",
    data: [54, 65, 60, 70, 70, 75]
  },
  {
    label: "Harry",
    backgroundColor: "transparent",
    borderColor: "green",
    fill: false,
    pointRadius: 6,
    pointHitRadius: 12,
    pointBorderWidth: 3,
    pointBackgroundColor: "lightgreen",
    pointBorderColor: "black",
    pointHoverRadius: 10,
    pointStyle: "circle",
    data: [84, 56, 75, 40, 90, 85]
  }]
};

var chartOptions = {
  plugins: {
    title: {
      display: true,
      text: "Comparing Student Performance",
      position: "bottom"
    },
    legend: {
      position: "bottom",
      labels: {
        padding:  30
      }
    }
  },
  scales: {
    r: {
      max: 100,
      min: 30,
      ticks: {
        stepSize: 15,
        backdropColor: "orange",
        color: "white"
      },
      grid: {
        color: "black"
      },
      angleLines: {
          color: "gray"
      },
      pointLabels: {
        font: {
          size: 20
        }
      }
    }
  }
};

Inside the chartOptions object, the min and max values are used to set the minimum and maximum values for the scale. The stepSize key can be used to tell Chart.js the number of steps that it should take to go from min to max. As you can see in the chart below, the values go from 90 to 100 with an increase of just 10. Here is the final result of the above code.

Creating Polar Area Charts

Polar area charts are similar to pie charts. Two major differences between these charts are that in polar area charts all the sectors have equal angles, and the radius of each sector depends on the plotted value. These charts are used to plot cyclic phenomena. For example, you can use them to plot the number of migratory birds of a given species in your area in each season of the year.

The radius of each sector in these charts is proportional to the square root of the number of corresponding objects. In the case of migratory birds, the radius will be proportional to the square root of the number of birds in your area.

You can create polar area charts in Chart.js by setting the type key to polarArea. Here is the basic code that you need to create a polar chart.

var polarAreaChart = new Chart(birdsCanvas, {
    type: 'polarArea',
    data: birdsData,
    options: chartOptions
});

Here is the code to plot the number of migratory birds on a polar area chart. The only data provided at this point is the number of birds and the background color for different seasons.

var birdsData = {
  labels: ["Spring","Summer","Fall","Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.5)",
      "rgba(100, 255, 0, 0.5)",
      "rgba(200, 50, 255, 0.5)",
      "rgba(0, 100, 255, 0.5)"
    ]
  }]
};

var chartOptions = {
  plugins: {
    title: {
      display: true,
      align: "start",
      text: "Migratory Birds in Different Seasons"
    },
    legend: {
      align: "start"
    }
  }
};

var polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData,
  options: chartOptions
});

The above code will create the following polar area chart.

The polar area chart provides the usual options to set the backgroundColor, borderWidth, borderColor, hoverBackgroundColor, hoverBorderWidth, and hoverBorderColor. There are also some keys specific to polar area charts that you can use to customize their appearance.

For example, you can set the starting angle for the first value in the dataset using the startAngle key. Similarly, the angle subtended by each arc can be specified using the angle key inside arc. This angle is calculated automatically in such a way that it covers the whole 360° area. However, you can set it to any value you like.

The sectors drawn in the polar area chart are both rotated and scaled by default. You can prevent the scaling animation by setting the value of the animateScale key to false. Similarly, the rotating animation can be turned off by setting the value of the animateRotate key to false. Both these keys are available under animation.

The code below changes the value of a few keys to make the chart more visually appealing.

var chartOptions = {
  plugins: {
    title: {
      display: true,
      position: "bottom",
      text: "Migratory Birds in Different Seasons"
    },
    legend: {
      align: "center",
      position: "left",
      labels: {
        font: {
          size: 16
        }
      }
    }
  },
  animation: {
    animateRotate: false
  },
  scales: {
    r: {
      ticks: {
        font: {
          size: 16,
        },
        color:"white",
        backdropColor: "black"
      }
    },
  },
  elements: {
    arc: {
      angle: 180,
      borderColor: "black"
    }
  }
};

Besides rotating the chart and disabling the rotation animation, we have also moved the legend to the left of the chart by setting the value of position to left. This leaves enough space at the top of the chart to display it properly.

Final Thoughts

In this tutorial, you learned about the applications of radar and polar area charts. After that, you learned how to create basic charts and customize them with various configuration options available in Chart.js. You will learn about pie, donut, and bubble charts in the next part of the series.

If you're working with the web, especially on the front-end, JavaScript is important to know. Of course, it's not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you're looking for additional resources to study or to use in your work, check out what we have available on Envato Market.