There are various data visualization techniques designed to reveal insights that numbers alone just can’t. In this tutorial, we will see how to easily create a radar chart using JavaScript. It is an effective way to graphically represent multivariate data of several quantitative variables.
Writing the tutorial during the FIFA World Cup 2022, I could not resist taking some football data for a practical illustration. The JS radar chart examples built and customized here step by step will plot the number of goals three top players have scored for their clubs over the last six years: Lionel Messi, Cristiano Ronaldo, and Robert Lewandowski.
The whistle for kickoff is blown, and it all begins!
Building JS Radar Chart
After reading this tutorial, you will be able to build your own interactive, JavaScript-based radar charts suitable for any web page or application without hassle. Basically, there are just four fundamental steps along the way:
- Create an HTML container
- Include the necessary JavaScript files
- Load the data
- Write some JS code to draw the radar chart
1. Create an HTML container
Сreate a basic HTML page or use your existing one. Add an HTML block element, <div> which will contain the chart you will be making, and don’t forget to provide it with a unique ID attribute so that it could be referenced in the upcoming JS charting code.
Adding a few CSS rules in the <style> block allows you to control how your radar chart will be displayed. For example, if you set the width and height properties as 100% and the margin and padding as 0, it will take the entire page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radar Chart in JavaScript</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. Include the necessary JavaScript files
In the <head> section, include the JS scripts which will be used for building the radar chart, which is done using the <script> tags in the <head> section.
In this tutorial, we will use AnyChart JS Charts, a robust, award-winning JavaScript charting library. It supports radar plots among many chart types, providing pre-built features to create them with ease and no limits in customization. What’s important, AnyChart has detailed charting documentation and ready-to-use chart examples.
Let’s obtain AnyChart’s JS files from the CDN. (Alternatively, you can download them.) Building a radar chart requires the Core and Radar modules of the library. The JavaScript code is to be placed using the <script> tag in the <body> section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radar Chart in JavaScript</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// Put your JS column charting code here.
</script>
</body>
</html>
3. Set the data
Now it’s time to prepare data. As I mentioned earlier, we will be visualizing the total goals of Lewandowski, Ronaldo, and Messi for their clubs from 2017 to 2022.
I have taken goalscorer statistics from Transfermarkt, and now we can set the data for our radar chart (look at all available data formats to see what’s best in your situation):
var chartData = {
header: ['#', 'Robert Lewandowski', 'Cristiano Ronaldo', 'Lionel Messi'],
rows: [
['2017', 33, 19, 40],
['2018', 24, 36, 34],
['2019', 31, 17, 34],
['2020', 32, 33, 19],
['2021', 43, 25, 24],
['2022', 29, 11, 12]
]
};
Here, the data is set as an object with two properties. The first one is the header, which is an array of the players’ names. The second one is rows, with each item including the year and the number of total goals scored by each player (in the same order their names appear in the header). For example, the last row specifies that in 2022, Robert Lewandowski scored 29 goals, Cristiano Ronaldo scored 11, and Lionel Messi scored 12.
4. Write some JS code to draw the radar chart
Now that the web page is ready, the scripts are included, and the data is prepared, let’s get our hands dirty with some JS coding for the radar graphic visualization.
First, add the anychart.onDocumentReady() function to wrap the entire JavaScript code for the chart inside.
<script>
anychart.onDocumentReady(function () {
// The following JS radar chart code will be here.
}
</script>
Second, add the data (from the previous step).
var chartData = {
header: ['#', 'Robert Lewandowski', 'Cristiano Ronaldo', 'Lionel Messi'],
rows: [
['2017', 33, 19, 40],
['2018', 24, 36, 34],
['2019', 31, 17, 34],
['2020', 32, 33, 19],
['2021', 43, 25, 24],
['2022', 29, 11, 12]
]
};
Third, use the anychart.radar() function to create a radar chart instance.
var chart = anychart.radar();
Fourth, load the data to the radar chart.
chart.data(chartData);
Fifth, add a title, as appropriate chart captions are a must.
chart.title("Total Goals for Clubs");
Finally, place the chart in the container by referring to the ID given to the HTML element <div> in step 1, and draw the chart using the draw() function.
chart.container('container');
chart.draw();
Halftime whistle! A basic JS-based radar chart is ready!
You can find the interactive version of this basic radar chart on AnyChart Playground. For your convenience, the entire code is put below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Radar Chart in JavaScript</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-radar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create a data set
var chartData = {
header: ['#', 'Robert Lewandowski', 'Cristiano Ronaldo', 'Lionel Messi'],
rows: [
['2017', 33, 19, 40],
['2018', 24, 36, 34],
['2019', 31, 17, 34],
['2020', 32, 33, 19],
['2021', 43, 25, 24],
['2022', 29, 11, 12]
]
};
// create a radar chart
var chart = anychart.radar();
// set the chart data
chart.data(chartData);
// set the chart title
chart.title("Total Goals for Clubs");
// set the container id
chart.container('container');
// display the radar chart
chart.draw();
});
</script>
</body>
</html>
Customizing JS Radar Chart
The basic JavaScript-based radar chart looks great. But, let me continue with how you can make it even better. Adjusting various aspects of radar charts can be done easily. I will demonstrate a few effective tweaks right now.
A. Change the series type
B. Personalize the colors
C. Customize the appearance of the axes and grids
D. Modify the hover state
E. Add the legend
FOR A WALKTHROUGH OF THESE CUSTOMIZATIONS, CONTINUE READING THE ORIGINAL RADAR CHART TUTORIAL.
Top comments (0)