ChartRadarExample() — ui Function Reference

Architecture documentation for the ChartRadarExample() function in chart-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ChartRadarExample() — ui Function Reference

Dependency Diagram

graph TD
  8a4371f0_ce40_148e_13a7_5aa19051baca["ChartRadarExample()"]
  db4385e3_ad03_edc8_f86f_bcba741693f3["chart-example.tsx"]
  8a4371f0_ce40_148e_13a7_5aa19051baca -->|defined in| db4385e3_ad03_edc8_f86f_bcba741693f3
  style 8a4371f0_ce40_148e_13a7_5aa19051baca fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/chart-example.tsx lines 435–485

function ChartRadarExample() {
  return (
    <Example title="Radar Chart">
      <Card className="w-full">
        <CardHeader className="items-center pb-4">
          <CardTitle>Radar Chart - Multiple</CardTitle>
          <CardDescription>
            Showing total visitors for the last 6 months
          </CardDescription>
        </CardHeader>
        <CardContent className="pb-0">
          <ChartContainer
            config={radarChartConfig}
            className="mx-auto aspect-square max-h-[250px]"
          >
            <RadarChart data={radarChartData}>
              <ChartTooltip
                cursor={false}
                content={<ChartTooltipContent indicator="line" />}
              />
              <PolarAngleAxis dataKey="month" />
              <PolarGrid />
              <Radar
                dataKey="desktop"
                fill="var(--color-desktop)"
                fillOpacity={0.6}
              />
              <Radar dataKey="mobile" fill="var(--color-mobile)" />
            </RadarChart>
          </ChartContainer>
        </CardContent>
        <CardFooter className="flex-col gap-2">
          <div className="flex items-center gap-2 leading-none font-medium">
            Trending up by 5.2% this month{" "}
            <IconPlaceholder
              lucide="TrendingUpIcon"
              tabler="IconTrendingUp"
              hugeicons="ChartUpIcon"
              phosphor="TrendUpIcon"
              remixicon="RiLineChartLine"
              className="size-4"
            />
          </div>
          <div className="text-muted-foreground flex items-center gap-2 leading-none">
            January - June 2024
          </div>
        </CardFooter>
      </Card>
    </Example>
  )
}