Radar Chart

This chart type belongs to PowerCharts XT.

Radar Chart - Elements

A radar chart (also known as a spider chart) is a visual interpretation of data bearing multiple dimensions. With the radial grid like structure, the chart displays the values of different categories on its axis. Radar charts are primarily used as a data comparison tool to visually correlate and contrast entities over its diverse aspects such as growth against benchmarks, progress over several criteria, etc. Radar charts can be plotted for a single dataset (single-series radar chart) or multiple datasets (multi-series radar chart).

Common application areas for radar charts include:

  • Business performance

  • Quality analysis

  • Product comparison

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "Radar Chart", "imgSrc": "radar-chart-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "37.5%", "topPosition": "11.5%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "61%", "topPosition": "19%", "annotationLinks": [{ "linkDesc": "Learn how to add sub-caption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "62%", "topPosition": "29%", "annotationLinks": [{ "linkDesc": "You can customize border for canvas, learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "51%", "topPosition": "43%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "5", "annotationName": "Data Label", "annotationDesc": "Data labels are the names of the data points that are displayed on the x-axis of a chart.", "annotationDescLinkPath": null, "leftPosition": "74%", "topPosition": "38%", "annotationLinks": [{ "linkDesc": "You can configure the arrangement and display properties for data labels. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/data-labels" }] }, { "annotationNumber": "6", "annotationName": "Legend", "annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.", "annotationDescLinkPath": null, "leftPosition": "56%", "topPosition": "69%", "annotationLinks": [{ "linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size" }, { "linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position" }, { "linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ", "linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend" } ] } ] } ] } }

As an example, we will create our first radar chart that plots the results of a customer feedback survey based on five categories. The radar chart will be used to compare the results for each category and determine what service needs improvement.

To create a radar chart follow the steps given below:

  • Specify the chart type using the type attribute. To render a radar chart, set radar.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

In the JSON data:

  • Set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the label for a data item using the label attribute. This attribute belongs to the category object, which in turn belongs to the categories object.

  • Specify the value for a data item using the value attribute within the data object.

  • Specify the name of the series for a dataset using the seriesname attribute. This attribute belongs to the dataset object.

For a detailed list of attributes, refer to the chart attributes page of multi-series radar chart.

The radar chart created will look like as shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Store rating across parameters",
        "subCaption": "Based on customer feedback survey",
        "numberPreffix": "$",
        "theme": "fusion",
        "radarfillcolor": "#ffffff"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Ambience"
                },
                {
                    "label": "Product Assortment"
                },
                {
                    "label": "Price Competitiveness"
                },
                {
                    "label": "Service"
                },
                {
                    "label": "Recommend to others"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "User Ratings",
            "data": [
                {
                    "value": "3.5"
                },
                {
                    "value": "4.8"
                },
                {
                    "value": "3.1"
                },
                {
                    "value": "4.0"
                },
                {
                    "value": "3.6"
                }
            ]
        }
    ]
}
<chart caption="Store rating across parameters" subcaption="Based on customer feedback survey" numberpreffix="$" theme="fusion" radarfillcolor="#ffffff">
    <categories>
        <category label="Ambience" />
        <category label="Product Assortment" />
        <category label="Price Competitiveness" />
        <category label="Service" />
        <category label="Recommend to others" />
    </categories>
    <dataset seriesname="User Ratings">
        <set value="3.5" />
        <set value="4.8" />
        <set value="3.1" />
        <set value="4.0" />
        <set value="3.6" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'radar',
    renderAt: 'chart-container',
    width: '600',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Store rating across parameters",
            "subCaption": "Based on customer feedback survey",
            "numberPreffix": "$",
            "theme": "fusion",
            "radarfillcolor": "#ffffff",
        },
        "categories": [{
            "category": [{
                "label": "Ambience"
            }, {
                "label": "Product Assortment"
            }, {
                "label": "Price Competitiveness"
            }, {
                "label": "Service"
            }, {
                "label": "Recommend to others"
            }]
        }],
        "dataset": [{
            "seriesname": "User Ratings",
            "data": [{
                "value": "3.5"
            }, {
                "value": "4.8"
            }, {
                "value": "3.1"
            }, {
                "value": "4.0"
            }, {
                "value": "3.6"
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the radar chart.

Now, we will create a multi-series radar chart for the budget analysis for the current month for the five key departments at a store. For each department, we will plot the allocated budget and the actual cost. This will help to determine how accurate the budget estimation at the beginning of the month was - whether the budget was over-allocated, under-allocated, or correctly allocated.

The data structure to create the multi-series radar chart is same as that of radar chart.

The multi-series radar chart thus created looks like this:

FusionCharts will load here..
{
    "chart": {
        "caption": "Budget Analysis",
        "subCaption": "Current month",
        "numberPreffix": "$",
        "theme": "fusion",
        "radarfillcolor": "#ffffff"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Marketing"
                },
                {
                    "label": "Product Management"
                },
                {
                    "label": "Customer Service"
                },
                {
                    "label": "Human Resources"
                },
                {
                    "label": "Sales & Distribution"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Allocated Budget",
            "data": [
                {
                    "value": "19000"
                },
                {
                    "value": "16500"
                },
                {
                    "value": "14300"
                },
                {
                    "value": "10000"
                },
                {
                    "value": "9800"
                }
            ]
        },
        {
            "seriesname": "Actual Cost",
            "data": [
                {
                    "value": "6000"
                },
                {
                    "value": "9500"
                },
                {
                    "value": "11900"
                },
                {
                    "value": "8000"
                },
                {
                    "value": "9700"
                }
            ]
        }
    ]
}
<chart caption="Budget Analysis" subcaption="Current month" numberpreffix="$" theme="fusion" radarfillcolor="#ffffff">
    <categories>
        <category label="Marketing" />
        <category label="Product Management" />
        <category label="Customer Service" />
        <category label="Human Resources" />
        <category label="Sales &amp; Distribution" />
    </categories>
    <dataset seriesname="Allocated Budget">
        <set value="19000" />
        <set value="16500" />
        <set value="14300" />
        <set value="10000" />
        <set value="9800" />
    </dataset>
    <dataset seriesname="Actual Cost">
        <set value="6000" />
        <set value="9500" />
        <set value="11900" />
        <set value="8000" />
        <set value="9700" />
    </dataset>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'radar',
    renderAt: 'chart-container',
    width: '600',
    height: '350',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Budget Analysis",
            "subCaption": "Current month",
            "numberPreffix": "$",
            "theme": "fusion",
            "radarfillcolor": "#ffffff"
        },
        "categories": [{
            "category": [{
                "label": "Marketing"
            }, {
                "label": "Product Management"
            }, {
                "label": "Customer Service"
            }, {
                "label": "Human Resources"
            }, {
                "label": "Sales & Distribution"
            }]
        }],
        "dataset": [{
            "seriesname": "Allocated Budget",
            "data": [{
                "value": "19000"
            }, {
                "value": "16500"
            }, {
                "value": "14300"
            }, {
                "value": "10000"
            }, {
                "value": "9800"
            }]
        }, {
            "seriesname": "Actual Cost",
            "data": [{
                "value": "6000"
            }, {
                "value": "9500"
            }, {
                "value": "11900"
            }, {
                "value": "8000"
            }, {
                "value": "9700"
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the multi-series radar chart.