Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

RadarChart

RadarChart is a component for drawing radar charts to compare multiple sets of data.

Source@yamada-ui/charts

Props

RadarChartProps

data

Required

Description

Chart data.

Type

Dict<any>[]

dataKey

Required

Description

The key of a group of data which should be unique in an chart.

Type

string

series

Required

Description

An array of objects with dataKey and color keys. Determines which data should be consumed from the data array.

Type

RadarProps[]

chartProps

Description

Props passed down to recharts RadarChart component.

Type

RadarChartProps

colorScheme

Description

The visual color appearance of the component.

Type

"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"

containerProps

Description

Props passed down to recharts ResponsiveContainer component.

Type

ResponsiveContainerProps

fillOpacity

Description

Controls fill opacity of all radars.

Type

number | [number, number]

Default

1

legendProps

Description

Props passed down to recharts 'Legend' component.

Type

LegendProps

polarAngleAxisProps

Description

Props passed down to recharts PolarAngleAxis component.

Type

PolarAngleAxisProps

polarAngleAxisTickFormatter

Description

A function to format Y axis tick.

Type

(value: number) => string

polarAngleAxisTickProps

Description

Props passed down to recharts tick of PolarAngleAxis component.

Type

CSSUIProps

polarGridProps

Description

Props passed down to recharts PolarGrid component.

Type

PolarGridProps

polarRadiusAxisProps

Description

Props passed down to recharts PolarRadiusAxis component.

Type

PolarRadiusAxisProps

polarRadiusAxisTickFormatter

Description

A function to format X axis tick.

Type

(value: number) => string

polarRadiusAxisTickProps

Description

Props passed down to recharts tick of PolarRadiusAxis component.

Type

CSSUIProps

radarProps

Description

Props for the radar.

Type

Partial<RadarProps>

size

Description

The size of the RadarChart.

Type

"sm" | "md" | "lg" | "full"

Default

"full"

strokeDasharray

Description

Dash array for the grid lines and cursor. The first number is the length of the solid line section and the second number is the length of the interval.

Type

string | number

strokeWidth

Description

Stroke width for the chart radars.

Type

number

Default

2

tooltipAnimationDuration

Description

Specifies the duration of animation, the unit of this option is ms.

Type

number

Default

0

tooltipProps

Description

Props passed down to recharts 'Tooltip' component.

Type

TooltipProps

unit

Description

Unit displayed next to each tick in y-axis.

Type

string

valueFormatter

Description

A function to format values on inside the tooltip.

Type

(value: any) => string

variant

Description

The variant of the RadarChart.

Type

string

withActiveDots

Description

Determines whether activeDots should be displayed.

Type

boolean

Default

true

withDots

Description

Determines whether dots should be displayed.

Type

boolean

Default

false

withLegend

Description

If true, legend is visible.

Type

boolean

Default

false

withPolarAngleAxis

Description

Determines whether polarAngleAxis should be displayed.

Type

boolean

Default

true

withPolarGrid

Description

Determines whether polarGrid should be displayed.

Type

boolean

Default

true

withPolarRadiusAxis

Description

Determines whether polarRadiusAxis should be displayed.

Type

boolean

Default

false

withTooltip

Description

If true, tooltip is visible.

Type

boolean

Default

true

RadarProps

activeDot

Type

DotProps

color

Type

UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">

dimDot

Type

DotProps

dimRadar

Type

Partial<RadarProps>

dot

Type

DotProps

Edit this page on GitHub

PreviousDonutChartNextRadialChart