RadarChart

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

interface Data {
  browser: string
  visits: number
  downloads: number
  fill?: CSSProps["fill"]
}

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(
  () => [
    {
      browser: "chrome",
      visits: faker.number.int({ max: 5000, min: 1000 }),
      downloads: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      browser: "edge",
      visits: faker.number.int({ max: 5000, min: 1000 }),
      downloads: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      browser: "firefox",
      visits: faker.number.int({ max: 5000, min: 1000 }),
      downloads: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      browser: "opera",
      visits: faker.number.int({ max: 5000, min: 1000 }),
      downloads: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      browser: "safari",
      visits: faker.number.int({ max: 5000, min: 1000 }),
      downloads: faker.number.int({ max: 5000, min: 1000 }),
    },
    {
      browser: "other",
      visits: faker.number.int({ max: 5000, min: 1000 }),
      downloads: faker.number.int({ max: 5000, min: 1000 }),
    },
  ],
  [],
)

return <RadarChart.Root nameKey="browser" data={data} series={series} />

Usage

import { RadarChart } from "@yamada-ui/react"

import { RadarChart } from "@/components/ui"

import { RadarChart } from "@workspaces/ui"

<RadarChart.Root>
  <RadarChart.Radar>
    <RadarChart.LabelList />
  </RadarChart.Radar>
  <RadarChart.Label />
  <RadarChart.Grid />
  <RadarChart.RadiusAxis />
  <RadarChart.AngleAxis />
  <RadarChart.Tooltip />
  <RadarChart.Legend />
</RadarChart.Root>

Composition

const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root data={data}>
    <RadarChart.Tooltip />
    <RadarChart.Radar color="blue" dataKey="visits" />
    <RadarChart.Radar color="green" dataKey="downloads" />
    <RadarChart.RadiusAxis />
    <RadarChart.AngleAxis dataKey="browser" />
  </RadarChart.Root>
)

Change Size

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <VStack>
    <For each={["xs", "sm", "md", "lg", "xl"]}>
      {(size, index) => (
        <RadarChart.Root
          key={index}
          data={data}
          nameKey="browser"
          series={series}
          size={size}
        />
      )}
    </For>
  </VStack>
)

Change Color Scheme

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries(
      [{ dataKey: "visits" }, { dataKey: "downloads" }],
      "blue",
    ),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return <RadarChart.Root data={data} nameKey="browser" series={series} />

Change Color

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () => [
    { color: "red", dataKey: "visits" },
    { color: "green", dataKey: "downloads" },
  ],
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return <RadarChart.Root data={data} nameKey="browser" series={series} />

Add Radius Axis

To add the radius axis, set withRadiusAxis to true. The default is false.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries(
      [{ dataKey: "visits" }, { dataKey: "downloads" }],
      "blue",
    ),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    series={series}
    withRadiusAxis
  />
)

Change Radius Axis Angle

To change the radius axis angle, set radiusAxisProps.angle to the desired angle. The default is 90.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries(
      [{ dataKey: "visits" }, { dataKey: "downloads" }],
      "blue",
    ),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    series={series}
    withRadiusAxis
    radiusAxisProps={{ angle: 30 }}
  />
)

Add Legend

To add the legend, set withLegend to true. To change the placement, set legendProps.placement.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () => [
    { color: "red", dataKey: "visits" },
    { color: "green", dataKey: "downloads" },
  ],
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root data={data} nameKey="browser" series={series} withLegend />
)

Add Label

To display labels, set label or radarProps.label to true. The default is false.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () => [{ color: "blue", dataKey: "visits" }],
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radarProps={{ dot: true, label: true }}
    series={series}
  />
)

Change Grid Type

To change the grid type, set gridProps.gridType to "polygon" or "circle".

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <VStack>
    <For each={["polygon", "circle"]}>
      {(gridType, index) => (
        <RadarChart.Root
          key={index}
          data={data}
          gridProps={{ gridType }}
          nameKey="browser"
          series={series}
        />
      )}
    </For>
  </VStack>
)

Fill Grid

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <VStack>
    <For each={["polygon", "circle"]}>
      {(gridType, index) => (
        <RadarChart.Root
          key={index}
          data={data}
          gridProps={{ fill: "mono.emphasized", gridType, opacity: 0.2 }}
          nameKey="browser"
          series={series}
        />
      )}
    </For>
  </VStack>
)

Display Line Only

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () => [
    { color: "red", dataKey: "visits" },
    { color: "green", dataKey: "downloads" },
  ],
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radarProps={{ fill: "transparent" }}
    series={series}
  />
)

Add Dot

To display dots, set dot or radarProps.dot to true.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radarProps={{ dot: true }}
    series={series}
  />
)

Sync

To sync charts, set syncId to a string.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <VStack>
    <RadarChart.Root
      data={data}
      nameKey="browser"
      series={series}
      syncId="chart"
    />
    <RadarChart.Root
      data={data}
      nameKey="browser"
      series={series}
      syncId="chart"
    />
  </VStack>
)

Format

To format the chart, use formatter or tickFormatter etc.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () => [{ color: "blue", dataKey: "visits" }],
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    angleAxisProps={{ tickFormatter: (value) => toTitleCase(value) }}
    data={data}
    nameKey="browser"
    radarProps={{
      dot: true,
      label: { formatter: (value) => Number(value).toLocaleString() },
    }}
    series={series}
    tooltipProps={{
      formatter: (value, name = "") => [
        Number(value).toLocaleString(),
        toTitleCase(name),
      ],
      labelFormatter: (value) => toTitleCase(isString(value) ? value : ""),
    }}
  />
)

Add Angle Axis Line

To display the axis line of the angle axis, set angleAxisProps.axisLine to true.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    angleAxisProps={{ axisLine: true }}
    data={data}
    nameKey="browser"
    series={series}
  />
)

Add Angle Axis Tick Line

To display tick lines of the angle axis, set angleAxisProps.tickLine to true.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    angleAxisProps={{ tickLine: true }}
    data={data}
    nameKey="browser"
    series={series}
  />
)

Set Domain

To set the value range, set radiusAxisProps.domain to an array in radiusAxisProps. To set the ticks, set radiusAxisProps.ticks to an array in radiusAxisProps.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radiusAxisProps={{
      axisLine: false,
      domain: [0, 7000],
      tick: false,
      ticks: [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000],
    }}
    series={series}
    withRadiusAxis
  />
)

To display the tooltip cursor, set tooltipProps.cursor to true.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    series={series}
    tooltipProps={{ cursor: true }}
  />
)

Hide Angle Axis

To hide the angle axis, set withAngleAxis to false. The default is true.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    series={series}
    withAngleAxis={false}
  />
)

Hide Grid

To hide the grid, set withGrid to false. The default is true.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    series={series}
    withGrid={false}
  />
)

Hide Active Dot

To hide active dots, set activeDot or radarProps.activeDot to false.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radarProps={{ activeDot: false }}
    series={series}
  />
)

To hide the tooltip, set withTooltip to false. The default is true.

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    series={series}
    withTooltip={false}
  />
)

Customize Dot

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([
      { dataKey: "visits", dot: { fill: "blue" } },
      { dataKey: "downloads" },
    ]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radarProps={{ activeDot: false }}
    series={series}
    tooltipProps={{ contentProps: { withSwatch: false } }}
  />
)

Customize Active Dot

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radarProps={{ activeDot: { fill: ["blue", "red"] } }}
    series={series}
    tooltipProps={{ contentProps: { withSwatch: false } }}
  />
)

Customize Label

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () => [{ color: "blue", dataKey: "visits" }],
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    radarProps={{
      activeDot: { fill: "red" },
      dot: { fill: "red" },
      label: { color: "red" },
    }}
    series={series}
    tooltipProps={{ contentProps: { withSwatch: false } }}
  />
)

const series = useMemo<RadarChart.RadarProps<Data>[]>(
  () =>
    RadarChart.mergeSeries([{ dataKey: "visits" }, { dataKey: "downloads" }]),
  [],
)
const data = useMemo<Data[]>(() => createPolarChartData(), [])

return (
  <RadarChart.Root
    data={data}
    nameKey="browser"
    series={series}
    tooltipProps={{ cursor: { stroke: ["red", "blue"] } }}
  />
)

Props

RadarChart.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`activeDotFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the active dot.
`activeDotRadius`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| 0 ...` The radius of the active dot.
`activeDotStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the active dot.
`activeDotStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the active dot stroke.
`angleAxisLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the angle axis line.
`angleAxisLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the angle axis line stroke.
`angleAxisProps`	-	`UseAngleAxisProps` Props for the angle axis component.
`angleAxisTextColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the angle axis text.
`angleAxisTextFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the angle axis text.
`chartProps`	-	`Omit<OriginalPolarChartProps, "data">` Props for the polar chart component.
`data`	-	`Y[]` Chart data.
`donutProps`	-	`Omit<ChartPieProps<Dict<any>>, "data" \| "dataKey" \| "nameKey">` Props for the donut component.
`dotFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the dot.
`dotRadius`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| 0 ...` The radius of the dot.
`dotStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the dot.
`dotStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the dot stroke.
`gridProps`	-	`ChartPolarGridProps` Props for the grid component.
`gridStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the grid.
`inactiveLabelLineOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive label line.
`inactiveLabelOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive label.
`inactiveRadarOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive radar.
`inactiveSectorOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The opacity of the inactive sector.
`labelColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the label.
`labelFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the label.
`labelLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the label line.
`labelLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the label line stroke.
`labelListColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the label list.
`labelListFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the label list.
`legendProps`	-	`ChartLegendProps` Props for the legend component.
`nameKey`	-	`keyof Y` The key to use for the angle axis.
`pieProps`	-	`Omit<ChartPieProps<Dict<any>>, "data" \| "dataKey" \| "nameKey">` Props for the pie component.
`radarColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the radar.
`radarFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The fill opacity of the radar.
`radarProps`	-	`Omit<ChartRadarProps<Dict<any>>, "data" \| "dataKey">` Props for the radar component.
`radarStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the radar.
`radarStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the radar stroke.
`radialBackgroundColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the radial background.
`radialBackgroundFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the radial background.
`radialBackgroundStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the radial background.
`radialBackgroundStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the radial background stroke.
`radialProps`	-	`Omit<ChartRadialProps<Dict<any>>, "dataKey" \| "nameKey">` Props for the radial component.
`radiusAxisLineStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the radius axis line.
`radiusAxisLineStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the radius axis line stroke.
`radiusAxisProps`	-	`UseRadiusAxisProps` Props for the radius axis component.
`radiusAxisTextColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the radius axis text.
`radiusAxisTextFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the radius axis text.
`responsiveContainerProps`	-	`Props` Props for the responsive container component.
`sectorColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color of the sector.
`sectorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the sector.
`sectorProps`	-	`ChartSectorProps` Props for the sector component.
`sectorStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the sector.
`sectorStrokeWidth`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number \| number & {} ...` The width of the sector stroke.
`series`	-	`ChartRadarProps<Y>[]` - If provided, generate lines based on series.
`tooltipCursorFill`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The fill of the tooltip cursor.
`tooltipCursorFillOpacity`	-	`"-moz-initial" \| "inherit" \| "initial" \| "revert-layer" \| "revert" \| "unset" \| number & {} ...` The fill opacity of the tooltip cursor.
`tooltipCursorStroke`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The stroke of the tooltip cursor.
`tooltipProps`	-	`ChartTooltipProps<number, string>` Props for the tooltip component.
`withAngleAxis`	`true`	`boolean` If `true`, angle axis is visible.
`withGrid`	`true`	`boolean` If `true`, grid is visible.
`withLegend`	`false`	`boolean` If `true`, legend is visible.
`withRadiusAxis`	`false`	`boolean` If `true`, radius axis is visible.
`withTooltip`	`true`	`boolean` If `true`, tooltip is visible.

RadarChart.AngleAxis

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`axisLine`	`false`	`ChartAxisLine` The tick line to use for the axis.
`dataKey`	-	`keyof Y` The key of a group of data which should be unique in an chart.
`label`	`false`	`ChartLabel` The label to use for the axis.
`tick`	`true`	`ChartPolarAxisTick` The tick to use for the axis.
`tickLine`	`false`	`ChartTickLine` The tick line to use for the axis.

RadarChart.Grid

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

RadarChart.Label

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

RadarChart.LabelList

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

RadarChart.Legend

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`contentProps`	-	`Omit<ChartLegendContentProps, "formatter" \| "payload">` Props for the content component.
`placement`	`"start-end"`	`Direction` The placement of the legend.

RadarChart.Radar

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`dataKey`	-	`keyof Y` The key of a group of data which should be unique in an chart.
`activeDot`	`true`	`ChartActiveDot` The active dot to use for the line.
`dot`	`false`	`ChartDot` The dot to use for the line.
`label`	`false`	`ChartLabelListType` The label to use for the line.

RadarChart.RadiusAxis

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`axisLine`	`false`	`ChartAxisLine` The tick line to use for the axis.
`dataKey`	-	`keyof Y` The key of a group of data which should be unique in an chart.
`label`	`false`	`ChartLabel` The label to use for the axis.
`tick`	`true`	`ChartPolarAxisTick` The tick to use for the axis.
`tickLine`	`false`	`ChartTickLine` The tick line to use for the axis.
`ticks`	-	`number[]` The ticks to use for the axis.

RadarChart.Tooltip

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`contentProps`	-	`Omit<ChartTooltipContentProps, "formatter" \| "label" \| "labelFormatter" \| "payload">` Props for the content component.
`cursor`	-	`boolean \| ChartTooltipCursorProps \| ReactElement` Props for the cursor component.