Skip to content

Radar chart

D3 API

js
import { Radar } from '@semcore/ui/d3-chart';

<Radar/>;
import { Radar } from '@semcore/ui/d3-chart';

<Radar/>;

RadarProps

& {...}
NameTypeDescription
scaleanyScale for radar element
type"polygon" | "circle"Graph type to be displayed
offsetnumberIndent from the edge of svg to graph
textSizenumberLabel font size
angleOffsetnumberBase angle of chart rotation

Radar.Axis

js
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Axis/>;
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Axis/>;

RadarAxisProps

& {...}
NameTypeDescription
dataKeystringSets the field name for categories

Radar.Axis.Labels

js
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Axis.Labels/>;
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Axis.Labels/>;

RadarAxisLabelsProps

NameTypeDescription
labelOffsetnumberIndent from graph to label

Radar.Axis.Ticks

js
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Axis.Ticks/>;
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Axis.Ticks/>;

RadarAxisTicksProps

NameTypeDescription
tickSizenumberDistance between auxiliary lines

Radar.Polygon

js
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Polygon/>;
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Polygon/>;

RadialPolygonProps

& {...}
NameTypeDescription
dataKeystringSets the field name for data
curveCurve method
colorstringSets the color of the entire polygon
fillstringSets the fill color

Radar.Polygon.Line

js
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Polygon.Line/>;
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Polygon.Line/>;

RadialPolygonLineProps

NameTypeDescription
colorstringSets the line color

Radar.Polygon.Dots

js
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Polygon.Dots/>;
import { Radar } from '@semcore/ui/d3-chart';

<Radar.Polygon.Dots/>;

RadialPolygonDotsProps

NameTypeDescription
colorstringSets the dot color

Released under the MIT License.

Released under the MIT License.