Developer D3 chart
For all common D3 chart properties, refer to D3 chart API.
js
import { Radar } from 'intergalactic/d3-chart';
<Radar/>;import { Radar } from 'intergalactic/d3-chart';
<Radar/>;RadarProps
& {...}| Name | Type | Description |
|---|---|---|
| scale | any | 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 |
Radar.Axis
js
import { Radar } from 'intergalactic/d3-chart';
<Radar.Axis/>;import { Radar } from 'intergalactic/d3-chart';
<Radar.Axis/>;RadarAxisProps
& {...}| Name | Type | Description |
|---|---|---|
| dataKey | string | Sets the field name for categories |
Radar.Axis.Labels
js
import { Radar } from 'intergalactic/d3-chart';
<Radar.Axis.Labels/>;import { Radar } from 'intergalactic/d3-chart';
<Radar.Axis.Labels/>;RadarAxisLabelsProps
| Name | Type | Description |
|---|---|---|
| labelOffset | number | Indent from graph to label |
Radar.Axis.Ticks
js
import { Radar } from 'intergalactic/d3-chart';
<Radar.Axis.Ticks/>;import { Radar } from 'intergalactic/d3-chart';
<Radar.Axis.Ticks/>;RadarAxisTicksProps
| Name | Type | Description |
|---|---|---|
| tickSize | number | Distance between auxiliary lines |
Radar.Polygon
js
import { Radar } from 'intergalactic/d3-chart';
<Radar.Polygon/>;import { Radar } from 'intergalactic/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
js
import { Radar } from 'intergalactic/d3-chart';
<Radar.Polygon.Line/>;import { Radar } from 'intergalactic/d3-chart';
<Radar.Polygon.Line/>;RadialPolygonLineProps
| Name | Type | Description |
|---|---|---|
| color | string | Sets the line color |
Radar.Polygon.Dots
js
import { Radar } from 'intergalactic/d3-chart';
<Radar.Polygon.Dots/>;import { Radar } from 'intergalactic/d3-chart';
<Radar.Polygon.Dots/>;RadialPolygonDotsProps
| Name | Type | Description |
|---|---|---|
| color | string | Sets the dot color |