Radar charts are line charts plotted on a radial axis. They can be used with one or more datasets that contain at least three values each. There is only one axis, which starts from the center. Each line begins and ends at the same point and, for that reason, radar charts are usually used to display values that are either cyclic in nature (such as hours, months, schedules, or repeating events), a sequential list of categories which end at the same place where it begins (such as round-trip), or categories that have no specific order. A radar chart can be used to compare different datasets by revealing strong and weak points, or showing outliers and commonality in data. It usually works best with a small number of datasets (that is, no more than three or four).
Radar charts are usually a poor choice for large datasets. In these cases, it's usually better to use a Cartesian line chart or a bar chart. Radial distances are also harder to perceive, although this limitation can be minimized with the grid.
The configurable properties for radar charts are the same as line charts. You can even reuse the same datasets and labels. The data property of each dataset must contain an array of numbers and the chart object should be configured with type='radar'.
In the following example, a radar chart is being used to compare three different travel schedules for a 30-day trip. Each dataset lists the number of days spent in each city. Using this chart, a tourist can quickly visualize how the days of the trip will be distributed, per city, making it easier to choose the best schedule:
let dataObj = {
labels: ["Lisbon", "Paris", "Berlin", "Moscow", "Rome",
"Barcelona"],
datasets: [
{
label: "Trip schedule #1",
data: [5,5,5,5,5,5],
borderColor: 'red',
backgroundColor: 'hsla(0,75%,75%,.25)'
},{
label: "Trip schedule #2",
data: [7,3,3,3,7,7],
borderColor: 'blue',
backgroundColor: 'hsla(240,75%,75%,.25)'
},{
label: "Trip schedule #3",
data: [4,7,7,7,3,2],
borderColor: 'yellow',
backgroundColor: 'hsla(60,75%,75%,.25)'
}
]
}
const chartObj = {
type: "radar",
data: dataObj,
options: {
scale: {
ticks: {
beginAtZero: true,
stepSize: 1 // show one gridline per day
}
}
}
};
new Chart("my-radar-chart", chartObj);
Instead of a scales property containing x axes and y axes, a radar chart has a single scale property. The grid structure is configured within the ticks property (more about scales at the end of this chapter).
The result is shown as follows. You can see the full code in Radar/radar-1.html:
Radar charts are great for cyclic data, such as the months in a year. Let's try to transform the Cartesian line chart we created in the previous section into a radar chart with the same data. Most of the code is the same. You only need to change the chart type, but some minor changes in the configuration will make it look better.
The following code shows a slightly modified draw() function that uses the same NASA/GISS monthly temperature data, but draws the lines in a radar chart:
const months = ["Jan", "Feb", "Mar", ... , "Sep", "Oct", "Nov",
"Dec"];
function draw(datasetMap) {
const datasets = [];
datasetMap.forEach((entry, key) => {
const dataset = {
label: key,
data: entry.map(n => n.value),
borderColor: 'hsla('+(key*2)+',50%,50%,.9)',
backgroundColor: 'hsla('+(key*2)+',50%,50%,0.1)',
borderWidth: 1,
pointRadius: 0, // don't show the data points
lineTension: .4 // do draw lines as curves (not default in
radar)
};
datasets.push(dataset);
});
const dataObj = {
labels: months,
datasets: datasets
}
const chartObj = {
type: "radar",
data: dataObj,
options: {
animation: {
duration: 0
},
scale: {
ticks: {
max: 1.5
}
},
legend: {
labels: {
boxWidth: 20,
filter: function(item, chart) {
return new Number(item.text) % 20 == 0
|| item.text % 2016 == 0;
}
}
}
}
};
new Chart("my-radar-chart", chartObj);
}
The default line tension is 0 for radar charts, which draws straight lines. Since the values are averages, we selected a value between 0 and 0.5 for the lineTension property to make the chart draw curved lines.
The full code is available in Radar/radar-3.html. The result is shown as follows:
The variation in color is sufficient to reveal that temperatures are increasing year after year. However, if you wish for more precision, you can try filtering out some datasets and display only the data for every two decades, as follows:
datasets: datasets.filter(d => d.label % 20 == 0 || d.label % 2016 == 0)
The result, showing only eight years is demonstrated as follows. The full code is in Radar/radar-4.html:
