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

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: "Student A",
    backgroundColor: "rgba(200,0,0,0.2)",
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "rgba(0,0,200,0.2)",
    data: [54, 65, 60, 70, 70, 75]
  }]
};

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

The first chart that we usually create does not have any background color specifically set by us. However, radar charts can have a lot of overlap, making it difficult to correctly identify the data points without any color coding. 

For this reason, a color has been assigned to each dataset using the backgroundColor key. 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.

Besides the background color, you can also change the border color and border width for the chart using the borderColor and borderWidth keys. 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. 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 also control 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: "Student A",
    backgroundColor: "transparent",
    borderColor: "rgba(200,0,0,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "orange",
    pointBorderColor: "rgba(200,0,0,0.6)",
    pointHoverRadius: 10,
    data: [65, 75, 70, 80, 60, 80]
  }, {
    label: "Student B",
    backgroundColor: "transparent",
    borderColor: "rgba(0,0,200,0.6)",
    fill: false,
    radius: 6,
    pointRadius: 6,
    pointBorderWidth: 3,
    pointBackgroundColor: "cornflowerblue",
    pointBorderColor: "rgba(0,0,200,0.6)",
    pointHoverRadius: 10,
    data: [54, 65, 60, 70, 70, 75]
  }]
};

var chartOptions = {
  scale: {
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18
    }
  },
  legend: {
    position: 'left'
  }
};

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. 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 it 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 polarAreaChart = new Chart(birdsCanvas, {
  type: 'polarArea',
  data: birdsData
});

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 polar area chart specific keys 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 lineArc key that can be found under scale can be used to specify if the lines drawn should be circular or not by setting its value to true or false respectively.

The sectors drawn in the polar area chart are both rotated and scaled by default. However, 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 birdsData = {
  labels: ["Spring", "Summer", "Fall", "Winter"],
  datasets: [{
    data: [1200, 1700, 800, 200],
    backgroundColor: [
      "rgba(255, 0, 0, 0.6)",
      "rgba(0, 255,200, 0.6)",
      "rgba(200, 0, 200, 0.6)",
      "rgba(0, 255, 0, 0.6)"
    ],
    borderColor: "rgba(0, 0, 0, 0.8)"
  }]
};

var chartOptions = {
  startAngle: -Math.PI / 4,
  legend: {
    position: 'left'
  },
  animation: {
    animateRotate: false
  }
};

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

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 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 in the Envato marketplace.

If you have any questions about this tutorial, please let me know in the comments.