How to create spider web diagram?

5 mins read

The spider chart is also called radar chart, which visualizes data in terms of values and angles. It provides options for visual comparison between several quantitative or qualitative aspects of a situation.

Let's start with a simple radar chart.

Step-1: Adding Script file

Include ej2.min.js script file in your sample. It contains all dependencies to render the radar chart.

radar.html
 
<html>
<head>
   // Adding ej2.min.js CDN link
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
</html>

Step-2: Creating Chart Container

Create a container for radar chart to get render.

radar.html
 
<html>
<body>
    // Chart container
    <div id="container"></div>
</body>
</html>

Step-3: Creating the chart

Basic Radar Chart

Consider the following data to be rendered the radar chart.

Alaska Weather Statistics - 2016
Months	Warmest	Coldest
X-values	Y-values
Jan	-7.1	-17.4
Feb	-3.7	-15.6
Mar	0.8	-12.3
Apr	6.3	-5.3
May	13.3	1.0
Jun	18.0	6.9
Jul	19.8	9.4
Aug	18.1	7.6
Sep	13.1	2.6
Oct	4.1	-4.9
Nov	-3.8	-13.4
Dec	-6.8	-16.4

Here are the steps for creating the chart:

Create chart instance by using new ej.charts.Chart().
Assign the data using dataSource property in series.
Bind the x and y values to xName and yName properties in series.
Set the chart type to radar using type property in series.
Set the series type using drawType property in series.
Now append the chart instance to the container to render the radar chart.

// radar.html
 
<html>
<head>
   // Adding ej2.min.js CDN link
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
   // Adding radar.js script file
    <script src="radar.js" type="text/javascript"></script>
</head>
</html>

// radar.js
 
var chart = new ej.charts.Chart({
    //Initializing Primary X Axis
    primaryXAxis: {
        valueType: "Category",
        labelPlacement: "OnTicks",
        interval: 1,
    },
    //Initializing Primary Y Axis
    primaryYAxis: {
        minimum: -25,
        maximum: 25,
        interval: 10,
        edgeLabelPlacement: "Shift",
        labelFormat: "{value}°C"
    },
    //Initializing Chart Series
    series: [
        {
            type: "Radar",
            dataSource: [
                { x: "Jan", y: -7.1 },
                { x: "Feb", y: -3.7 },
                { x: "Mar", y: 0.8 },
                { x: "Apr", y: 6.3 },
                { x: "May", y: 13.3 },
                { x: "Jun", y: 18.0 },
                { x: "Jul", y: 19.8 },
                { x: "Aug", y: 18.1 },
                { x: "Sep", y: 13.1 },
                { x: "Oct", y: 4.1 },
                { x: "Nov", y: -3.8 },
                { x: "Dec", y: -6.8 }
            ],
            xName: "x",
            width: 2,
            yName: "y",
            name: "Warmest",
        },
        {
            type: "Radar",
            dataSource: [
                { x: "Jan", y: -17.4 },
                { x: "Feb", y: -15.6 },
                { x: "Mar", y: -12.3 },
                { x: "Apr", y: -5.3 },
                { x: "May", y: 1.0 },
                { x: "Jun", y: 6.9 },
                { x: "Jul", y: 9.4 },
                { x: "Aug", y: 7.6 },
                { x: "Sep", y: 2.6 },
                { x: "Oct", y: -4.9 },
                { x: "Nov", y: -13.4 },
                { x: "Dec", y: -16.4 }
            ],
            xName: "x",
            width: 2,
            yName: "y",
            name: "Coldest",
        }
    ],
});
chart.appendTo("#container");

basic radar chart

Step-4: Customizing the radar chart

Adding Chart Title

Add title to the chart, to provide quick information about the data plotted in the chart.

var chart = new ej.charts.Chart({
    title: "Alaska Weather Statistics - 2016"
});
chart.appendTo("#container");

radar chart with title

Adding marker

Data markers are used to provide information about the data points in the series. You can add a shape to adorn each data point. Markers can be added to the points by enabling the visible property.

var chart = new ej.charts.Chart({
            series: [
                
                {
                    marker: {
                         visible: true,
                   }
                }
            ],
        });
chart.appendTo('#container');

radar chart with marker

Adding data label

You can add data labels to improve the readability of the chart. This can be achieved by setting the visible property to true in the dataLabel object.

 
var chart = new ej.charts.Chart({
            series: [
                {
                    marker: {
                         dataLabel: { visible: true }
 
                   }
                }
            ],
        });
chart.appendTo('#container');

radar with data label

Adding Tooltip

The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the enable property as true in tooltip object.

var chart = new ej.charts.Chart({
            tooltip: {enable: true},
        });
chart.appendTo('#container');

radar with tooltip

Changing the draw type

You can change the series plotting type like line, column, area, range column, spline, scatter, stacking area and stacking column using drawType property.

Let’s see, area series in radar chart.

var chart = new ej.charts.Chart({
    series: [
        {
            type: "Radar",
            drawType: 'Area',
        },
        {
            type: "Radar",
            drawType: 'Area',
        }
    ],
});
chart.appendTo("#container");

radar chart with area series

Changing the series color

You can change the series color using fill property.

var chart = new ej.charts.Chart({
    series: [
        {
            type: "Radar",
            fill: '#00f0ff'
        },
        {
            type: "Radar",
            fill: '#d6ff00'
        }
    ],
});
chart.appendTo("#container");

radar chart with fill color

Did you find this information helpful?

Yes

Comments (0)