Chart.js Radar Chart

Last Updated : 05 Dec, 2023

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

new Chart($("#ID"), {
    type: 'radar'          
    data: { ... },
    options: { ... }
});

Radar Chart Dataset Properties:

There are some of the dataset properties that are mentioned below:

data.datasets[index]: This property is mainly used to customize the options that are related to the specific datasets at the index ‘index‘ in the ‘data‘ option.
data.datasets[index]: This property is used to define the options for all the line datasets under the ‘datasets‘ namespace in the ‘options’ object.
options.elements.line: This property is used to set the options for all line elements in the ‘options‘ object.
options.elements.point: This property is used to configure options for all points elements in the ‘options‘ object.
options: This property is the global property which is used to apply the options for the entire chart.

Radar Chart Point Styling:

pointBackgroundColor: Specifies the background color of radar chart data points.
pointBorderColor: Defines the border color of radar chart data points.
pointBorderWidth: Sets the width of the border around radar chart data points.
pointHitRadius: Represents the pixel area that can trigger a point click.
pointRadius: Determines the radius of radar chart data points.
pointRotation: Specifies the rotation angle of the point shape in degrees.
pointStyle: Sets the style of the radar chart data points.

Radar Chart Line Styling:

backgroundColor: Defines the background color of the radar chart area beneath the line.
borderCapStyle: Specifies the style of the line’s caps (ends).
borderColor: Sets the color of the radar chart line.
borderDash: Describes the dash pattern for the line (as an array).
borderDashOffset: Specifies the dash offset for the line.
borderJoinStyle: Determines the style used when two lines meet.
borderWidth: Sets the width of the radar chart line.
fill: Determines whether to fill the area beneath the radar chart line.
tension: Defines the line tension (curvature) of the radar chart line.
spanGaps: Specifies whether to draw the line when there are gaps in the data.

CDN link

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js”></script>

Example 1: In the below example, we have implemented simple Radar Chart which represents the data related to GeeksforGeeks Skills. We have used one dataset to represent the information in the Radar Chart.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
    </script>
    <title>Radar Chart Example</title>
</head>
 
<body>
    <div>
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
        <h5>Chart JS Radar Chart 1</h5>
        <div>
            <canvas id="radarChart"
                    width="700" height="300">
              </canvas>
        </div>
    </div>
    <script>
        let ctx = 
            document.getElementById('radarChart').getContext('2d');
        let myRadarChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels:
                    ['Coding', 'Problem Solving', 'Algorithms',
                     'Data Structures', 'GeeksforGeeks Knowledge'],
                datasets: [{
                    label: 'GeeksforGeeks Skills',
                    data: [90, 85, 80, 75, 95],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 0, 1)',
                    borderWidth: 2,
                }]
            },
            options: {
                scale: {
                    pointLabels: {
                        fontSize: 14,
                    }
                }
            }
        });
    </script>
</body>
 
</html>

Output:

Output1

Example 2: In the below example, we have implemented the Radar Chart with more than 1 dataset. In the chart, we are representing the information about the User skills on the GeeksforGeeks platform. We have considered the two users and we have defined the 2 datasets for these users and represented them in a Radar chart.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
    </script>
    <script src="
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
    </script>
    <title>Radar Chart Example</title>
</head>
 
<body>
    <div>
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
        <h5>Chart JS Radar Chart 2</h5>
        <div>
            <canvas id="radarChart"
                    width="700" height="300">
              </canvas>
        </div>
    </div>
    <script>
        let ctx = 
            document.getElementById('radarChart').getContext('2d');
        let myRadarChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels:
                    ['Coding', 'Problem Solving',
                     'Algorithms', 'Data Structures', 
                     'GeeksforGeeks Knowledge'],
                datasets: [{
                    label: 'User A Skills',
                    data: [90, 85, 80, 75, 95],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 2,
                },
                {
                    label: 'User B Skills',
                    data: [80, 70, 90, 85, 80],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2,
                }]
            },
            options: {
                scale: {
                    pointLabels: {
                        fontSize: 14,
                    }
                }
            }
        });
    </script>
</body>
 
</html>

Output:

Output2

Suggest improvement

Chart.js Polar Area Chart

Chart.js Scatter Chart

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Radar Chart

Syntax

Radar Chart Dataset Properties:

Radar Chart Point Styling:

Radar Chart Line Styling:

CDN link

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?