D3 chart

For all common D3 chart properties, refer to D3 chart API.

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

<Radar/>;

RadarProps

& {...}

Name	Type	Description
scale	any	Deprecated Scale for radar element
type	"polygon" | "circle"	Graph type to be displayed
offset	number	Indent from the edge of svg to graph
textSize	number	Label font size
angleOffset	number	Base angle of chart rotation
patterns		Enables charts patterns that enhances charts accessibility
onClick	(index: number, e: React.SyntheticEvent) => void	Callback triggered when a user clicks on a chart at a position corresponding to a category

Radar.Axis

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

<Radar.Axis/>;

RadarAxisProps

& {...}

Name	Type	Description
dataKey	string	Sets the field name for categories

Radar.Axis.Labels

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

<Radar.Axis.Labels/>;

RadarAxisLabelsProps

Name	Type	Description
labelOffset	number	Indent from graph to label

Radar.Axis.Ticks

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

<Radar.Axis.Ticks/>;

RadarAxisTicksProps

Name	Type	Description
tickSize	number	Distance between auxiliary lines

Radar.Polygon

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

<Radar.Polygon/>;

RadialPolygonProps

& {...}

Name	Type	Description
dataKey	string	Sets the field name for data
curve		Curve method
color	string	Sets the color of the entire polygon
fill	string	Sets the fill color

Radar.Polygon.Line

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

<Radar.Polygon.Line/>;

RadialPolygonLineProps

Name	Type	Description
color	string	Sets the line color

Radar.Polygon.Dots

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

<Radar.Polygon.Dots/>;

RadialPolygonDotsProps

Name	Type	Description
color	string	Sets the dot color