React React Charts Radar Chart

Overview

React Radar Chart visualize data in terms of values and angles. Visual comparisons can be made between several quantitative or qualitative aspects of a situation. Interactive features such as selection and tooltips provide additional insights.

Inverted axis

The React Radar Chart provides an option to reverse the axis labels and ticks. The inverted axis swaps the higher and lower ranges of an axis.

Start angle

Customize the start angle of the chart to rotate it.

Marker

Markers support built-in shapes such as circles, rectangles, ellipses, lines, diamonds, triangles, pentagons, crosses, and pluses. Images can also be used as marker symbols for customized presentations.

Data label

Data labels display information about data points. Templates support custom label content using HTML elements such as images, divs, and spans. Labels can also be rotated to a specified angle.

Chart types

The Radar Chart supports different types of series like Line, Column, Spline, Range Area, Scatter, and Stacked Area.

Wind Rose Chart

Create a Wind Rose Chart using Stacked Column Series in Polar and Radar Charts.

React Radar Chart code example

Get started with the React Radar Chart using a few lines of HTML and JavaScript code, as demonstrated below. Also explore demo to learn how to render and configure the component.

import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, RadarSeries, LineSeries } from '@syncfusion/ej2-react-charts';
import * as React from "react";

class App extends React.Component<{}, {}> {
    public primaryXAxis: AxisModel = { valueType: 'Category'};
    public data1: any[]= [
        { x: 'JPN', y: 5156 },
        { x: 'DEU', y: 3754 },
        { x: 'FRA', y: 2809 },
        { x: 'GBR', y: 2721 },
        { x: 'BRA', y: 2472 },
        { x: 'RUS', y: 2231 },
        { x: 'ITA', y: 2131 },
        { x: 'IND', y: 1857 },
        { x: 'CAN', y: 1843 }
];

  public render() {
    return<ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[RadarSeries,LineSeries]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={this.data1} xName='x' yName='y' type='Radar' drawType='Line'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

Learning resources

UG

Radar Chart User Guide

Learn the available options to customize the React Radar Chart.

API

Radar Chart API Reference

Explore the React Radar Chart APIs.

Explore all Syncfusion React components

Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.

Scroll up icon
Syncfusion Feedback