Radar

Radar charts, also known as Spider charts, are categorical charts which wrap the X axis in a circle or polygon.

Typically, the order of the categories is not significant.

Basic Usage

The following example demonstrates the Radar chart in action.

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Chart,
    ChartTitle,
    ChartLegend,
    ChartValueAxis,
    ChartValueAxisItem,
    ChartSeries,
    ChartSeriesItem
} from '@progress/kendo-react-charts';

import data from './radar-data.json';

const ChartContainer = () => (
    <Chart>
        <ChartTitle text="Market Value of Major Banks /bln/" />
        <ChartSeries>
            <ChartSeriesItem
                type="radarLine"
                data={data}
                field="pre"
                categoryField="name"
                name="Market value as of 2007"
            />
            <ChartSeriesItem
                type="radarLine"
                data={data}
                field="post"
                categoryField="name"
                name="Market value as of 2009"
            />
        </ChartSeries>
        <ChartValueAxis>
            <ChartValueAxisItem labels={{ format: 'C0' }} />
        </ChartValueAxis>
        <ChartLegend position="bottom" />
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);
 /