Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.8

RadialChart

RadialChart is a component for drawing radial charts to compare multiple sets of data.

Source@yamada-ui/charts

Props

RadialChartProps

data

Required

Description

Chart data.

Type

Dict<any>[]

chartProps

Description

Props passed down to recharts RadialBarChart component.

Type

RadialChartProps

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

dataKey

Description

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

Type

string

Default

'value'

endAngle

Description

Controls angle at which chart ends.

Type

number

Default

-180

fillOpacity

Description

Controls fill opacity of all pies.

Type

number | [number, number]

Default

1

innerRadius

Description

Controls innerRadius of the chart segments. If it is a number, it is the width of the radius. For example, 60 means the radius is 60px and the diameter is 120px.

Type

string | number

Default

'10%'

labelFormatter

Description

A function to format labels on inside the tooltip.

Type

(label: string) => string

labelListProps

Description

Props passed down to recharts LabelList components.

Type

LabelListProps[]

legendProps

Description

Props passed down to recharts 'Legend' component.

Type

LegendProps

outerRadius

Description

Controls thickness of the chart segments. If it is a number, it is calculated as px. If it is a number, it is the width of the radius. For example, 60 means the radius is 60px and the diameter is 120px.

Type

string | number

Default

'80%'

polarGridProps

Description

Props passed down to recharts PolarGrid component.

Type

PolarGridProps

radialBarProps

Description

Props for the radialBar.

Type

Partial<RadialBarProps>

size

Description

The size of the RadialChart.

Type

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

Default

"full"

startAngle

Description

Controls angle at which chart starts.

Type

number

Default

90

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

tooltipAnimationDuration

Description

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

Type

number

Default

0

tooltipDataSource

Description

Determines which data is displayed in the tooltip.

Type

TooltipDataSourceType

Default

'all'

tooltipProps

Description

Props passed down to recharts 'Tooltip' component.

Type

TooltipProps

unit

Description

Unit displayed next to each value in tooltip.

Type

string

valueFormatter

Description

A function to format values on inside the tooltip.

Type

(value: any) => string

variant

Description

The variant of the RadialChart.

Type

string

withLegend

Description

If true, legend is visible.

Type

boolean

Default

false

withPolarGrid

Description

Determines whether polarGrid should be displayed.

Type

boolean

Default

false

withTooltip

Description

If true, tooltip is visible.

Type

boolean

Default

true

ChartLabelProps

Edit this page on GitHub

PreviousRadarChartNextCarousel