Open In App

How To Draw Radar Charts In Web?

Last Updated : 22 Apr, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

The Radar charts consist of a series of data points that are plotted on radial axes emanating from the central point. Each axis represents a different variable and data points that are connected to form a polygon providing the visual representation of the data distribution.

Approach: Using Chart.js library

Chart.js provides a straightforward way to create radar charts using its radar chart type. Let’s see how to create a radar chart using Chart.js.

Chart.js CDN link:

Include the below chart.js CDN link to your HTML document to use chart.js in your project.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Example: The below code implements the Chart.js library to create radar chart on the web app.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        The Radar Chart
    </title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>

<body>
    <canvas id="radarChart"></canvas>
    <script>
        let ctx = document.
            getElementById('radarChart').
            getContext('2d');
        let myChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: 
                    ['A', 'B', 'C', 'D', 'E'],
                datasets: [{
                    label: 'Data Set 1',
                    data: [12, 19, 3, 5, 2],
                    backgroundColor: 
                        'rgba(255, 99, 132, 0.2)',
                    borderColor: 
                        'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    r: {
                        angleLines: {
                            display: false
                        },
                        suggestedMin: 0,
                        suggestedMax: 20
                    }
                }
            }
        });
    </script>
</body>

</html>

Output:

we1222

Example 2: The below code creates an advanced radar chart on the web page using chart.js.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>
        The Radar Chart Example
    </title>
    <script src=
"https://cdn.jsdelivr.net/npm/chart.js">
    </script>
</head>

<body>
    <canvas id="radarChart" width="400" 
        height="400">
    </canvas>
    <script>
        const ctx = document.
            getElementById('radarChart').
                getContext('2d');
        const myRadarChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: 
                    ['Category 1', 'Category 2', 'Category 3', 
                    'Category 4', 'Category 5'],
                datasets: [{
                    label: 'Dataset 1',
                    data: 
                        [10, 20, 15, 25, 30],
                    backgroundColor: 
                        'rgba(255, 99, 132, 0.2)',
                    borderColor: 
                        'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }, {
                    label: 'Dataset 2',
                    data: 
                        [15, 25, 20, 30, 35],
                    backgroundColor: 
                        'rgba(54, 162, 235, 0.2)',
                    borderColor: 
                        'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scale: {
                    ticks: {
                        beginAtZero: true
                    }
                }
            }
        });
    </script>
</body>

</html>

Output:

fddddddddddddd



Previous Article
Next Article

Similar Reads

How to Create Radar Chart using React Bootstrap ?
The radar chart is a chart or plot that consists of a sequence of equiangular spokes, called radii, with each spoke representing one of the variables. A radar chart is basically a graphical method of displaying data in the form of a two-dimensional chart of three or more quantitative variables that are represented on the axes starting from the same
2 min read
Angular PrimeNG Radar Chart Component
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see the Radar Chart Component in Angular PrimeNG. A Radar Chart is a graphical method for rendering multivariate data that is
3 min read
Create a Radar Chart using Recharts in ReactJS
Radar charts, also known as spider or star charts, provide a powerful way to display data having multiple variable in a circular layout. Recharts is a popular charting library that is used for creating charts for React JS, provides an easy and efficient method to implement radar charts within your React applications. Prerequisites:Basic understandi
2 min read
Chart.js Radar Chart
Chart.js Radar Chart is used to present the multivariate data in a spider-web-like format, which allows us to properly analyze and compare more than one quantitative variable in parallel. Using the Radar chart we can properly display the patterns and relationships among the various categories, as each axis links to a specific data dimension. Syntax
4 min read
Difference Between Web 1.0, Web 2.0, and Web 3.0
Web 1.0 was all about fetching, and reading information. Web 2.0 is all about reading, writing, creating, and interacting with the end user. It was famously called the participative social web. Web 3.0 is the third generation of the World Wide Web, and is a vision of a decentralized web which is currently a work in progress. It is all about reading
8 min read
How to Add Google Charts on a Webpage?
What is a pie chart? A pie chart (or a circle chart) is a circular statistical graphic which is divided into slices to illustrate numerical proportion. In a pie chart, the arc length of each slice (and consequently its central angle and area), is proportional to the quantity it represents. While it is named for its resemblance to a pie which has be
2 min read
How to insert Charts in New Google Sites ?
Sometimes, you want to add graphs and charts that you have created into your website to make your website more interactive, this can be done with the help of Google Sites. Google Sites allows the creator to embed charts make on Google Sheets into the website. To embed the charts into the website follow the steps mentioned below: Go to the Charts op
1 min read
How to Create Dynamic Pie and Funnel Charts in PHP using CanvasJS ?
In this article, we will learn to implement Pie and Funnel Charts dynamically in PHP using the Canvas JS plugin. A pie chart or circle graph in Data handling, is one type of pictorial representation of a given set of data, which is used to illustrate numerical problems by dividing a circular statistical graphic into slices or sectors. Here, the ter
4 min read
How to make Charts using Data from Google Sheets in JavaScript ?
This article will discuss how to create different charts using Data from a Google Sheet. To export data from a Google Sheet, we will use the SheetDB API. It converts data stored in a Google Spreadsheet into a JSON format API. After that, we will use Fetch API to pull that JSON data into our file. Once we have stored the data, we will use the Chart.
3 min read
How to Implement Scatter and Bubble Charts using CanvasJS ?
In this article, we will learn to create dynamic scatter and bubble charts using the Canvas JS plugin. Scatter chart: a chart that shows the relationship between two numeric variables to observe some pattern in the data taken as a whole. It uses dots to represent the values of 2 variables in the horizontal and vertical axis. Bubble Chart: is very m
5 min read