Radar chart

A radar chart (also known as a spider chart or web chart) displays measure values on radial axes that radiate from a common center point. Each value of the trendBy attribute becomes a spoke, and each measure — or each value of the segmentBy attribute — is drawn as a polygon connecting the points along those spokes. Use it to compare profiles across several categories, for example, scores across competencies.

Buckets

For code samples of both layouts, see Usage patterns.

Sorting

RadarChart applies no default sorting. To sort the data, pass sort items in the sortBy prop. See Sort items.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Limits

• A radar chart renders up to 10,000 polygons and up to 10,000 trendBy values. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.
• A radar chart doesn’t show axis names, even with xaxis.name.visible or yaxis.name.visible set to true.
• Radar charts are easiest to read with a small number of spokes, typically three to eight. Too many trendBy values make the polygons hard to read.

Usage patterns

Multiple measures

When you specify two or more measures, the radar chart draws one polygon per measure, all sharing the same spokes:

<RadarChart
    measures={[Md.$Revenue, Md.$Costs]}
    trendBy={Md.Quarter}
/>

Single measure segmented by attribute

When you specify a single measure together with segmentBy, the radar chart draws one polygon per value of the segmentBy attribute instead:

<RadarChart
    measures={[Md.$Revenue]}
    trendBy={Md.Quarter}
    segmentBy={Md.Region}
/>

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { RadarChart } from "@gooddata/sdk-ui-charts";

<RadarChart
    measures={<measures>}
    trendBy={<attribute>}
    segmentBy={<attribute>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { RadarChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <RadarChart
        measures={[Md.$NrOfOpportunities, Md.$NrOfWonOpportunities]}
        trendBy={Md.Region}
    />
</div>

Props