Radar Chart

Radar charts: dots, lines only, custom labels, grid variants and multiple series.

Radar charts built on the Chart component (install and API live there). Vue and Svelte draw the radar as inline SVG inside the chart container (Unovis and LayerChart have no radar).

Radar

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="polygon" />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="polygon" />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Dots

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Dots

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Dots

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Dots

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Dots
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={{
                r: 4,
                fill: "var(--color-desktop)",
                fillOpacity: 1,
                stroke: "var(--card)",
                strokeWidth: 2,
              }}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Dots</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="polygon" dots />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Dots</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="polygon" dots />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Lines Only

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Lines Only

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Lines Only

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Lines Only

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Lines Only
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0}
              stroke="var(--color-desktop)"
              strokeWidth={2}
            />
            <Radar
              dataKey="mobile"
              fill="var(--color-mobile)"
              fillOpacity={0}
              stroke="var(--color-mobile)"
              strokeWidth={2}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  { key: "mobile", label: "Mobile", color: "var(--color-mobile)", values: [80, 200, 120, 190, 130, 140] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Lines Only</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="polygon" :fill-opacity="0" />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
    mobile: { label: "Mobile", color: "var(--chart-2)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
    { key: "mobile", label: "Mobile", color: "var(--color-mobile)", values: [80, 200, 120, 190, 130, 140] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Lines Only</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="polygon" fillOpacity={0} />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Custom Label

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Custom Label

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Custom Label

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Custom Label

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Custom Label
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tick={({ x, y, textAnchor, index }) => (
                <text
                  x={x}
                  y={Number(y) - 3}
                  textAnchor={textAnchor}
                  fontSize={12}
                  className="fill-muted-foreground"
                >
                  <tspan className="fill-foreground font-semibold">
                    {data[index].desktop}
                  </tspan>
                  <tspan> ({data[index].month.slice(0, 3)})</tspan>
                </text>
              )}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Custom Label</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="polygon" custom-label />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Custom Label</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="polygon" customLabel />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Grid Custom

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Grid Custom

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Grid Custom

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Grid Custom

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Grid Custom
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid polarRadius={[44, 88]} />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid Custom</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="custom" />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid Custom</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="custom" />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Grid None

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Grid None

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Grid None

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Grid None

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { PolarAngleAxis, PolarRadiusAxis, Radar, RadarChart } from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Grid None
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={{
                r: 4,
                fill: "var(--color-desktop)",
                fillOpacity: 1,
                stroke: "var(--card)",
                strokeWidth: 2,
              }}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid None</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="none" dots />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid None</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="none" dots />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Grid Circle

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Grid Circle

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Grid Circle

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Grid Circle

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Grid Circle
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid gridType="circle" />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid Circle</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="circle" />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid Circle</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="circle" />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Grid Circle No Lines

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Grid Circle No Lines

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Grid Circle No Lines

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Grid Circle No Lines

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Grid Circle No Lines
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[262px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={88}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid gridType="circle" radialLines={false} />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={{
                r: 4,
                fill: "var(--color-desktop)",
                fillOpacity: 1,
                stroke: "var(--card)",
                strokeWidth: 2,
              }}
            />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid Circle No Lines</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="circle" :radial-lines="false" dots />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Grid Circle No Lines</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="circle" radialLines={false} dots />
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>

Multiple

StackBlitz ↗StackBlitz ↗StackBlitz ↗

Radar Chart - Multiple

Showing total visitors for the last 6 months

Trending up by 5.2% this monthJanuary - June 2024

Radar Chart - Multiple

Showing total visitors for the last 6 months

Trending up by 5.2% this month January - June 2024

Radar Chart - Multiple

Showing total visitors for the last 6 months

Desktop

Mobile

Trending up by 5.2% this month January - June 2024

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
} from "recharts";
import { IconPlaceholder } from "@/edmi/icon-placeholder";

const data = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig;

export default function Demo() {
  return (
    <Card className="w-full max-w-sm gap-0 py-0">
      <CardHeader className="gap-1 px-6 pt-5.5 pb-0">
        <CardTitle className="font-semibold text-base tracking-[-0.2px]">
          Radar Chart - Multiple
        </CardTitle>
        <CardDescription className="text-[13.5px]">
          Showing total visitors for the last 6 months
        </CardDescription>
      </CardHeader>
      <CardContent className="items-center px-5 pt-2.5 pb-0">
        <ChartContainer
          config={config}
          className="mx-auto aspect-auto h-[232px] w-full max-w-64 [&_.recharts-surface]:overflow-visible"
        >
          <RadarChart data={data} outerRadius={86}>
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <PolarAngleAxis
              dataKey="month"
              tickFormatter={(value) => value.slice(0, 3)}
            />
            <PolarRadiusAxis domain={[0, 400]} tick={false} axisLine={false} />
            <PolarGrid />
            <Radar
              dataKey="desktop"
              fill="var(--color-desktop)"
              fillOpacity={0.18}
              stroke="var(--color-desktop)"
              strokeWidth={2}
              dot={{
                r: 4,
                fill: "var(--color-desktop)",
                fillOpacity: 1,
                stroke: "var(--card)",
                strokeWidth: 2,
              }}
            />
            <Radar
              dataKey="mobile"
              fill="var(--color-mobile)"
              fillOpacity={0.18}
              stroke="var(--color-mobile)"
              strokeWidth={2}
              dot={{
                r: 4,
                fill: "var(--color-mobile)",
                fillOpacity: 1,
                stroke: "var(--card)",
                strokeWidth: 2,
              }}
            />
            <ChartLegend content={<ChartLegendContent />} />
          </RadarChart>
        </ChartContainer>
      </CardContent>
      <CardFooter className="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
        <b className="flex items-center gap-1.5 font-medium">
          Trending up by 5.2% this month
          <IconPlaceholder
            lucide="TrendingUpIcon"
            tabler="IconTrendingUp"
            hugeicons="ChartUpIcon"
            phosphor="TrendUpIcon"
            remixicon="RiArrowUpLine"
            className="size-4"
          />
        </b>
        <span className="text-muted-foreground">January - June 2024</span>
      </CardFooter>
    </Card>
  );
}

<script setup lang="ts">
import { TrendingUpIcon } from "@lucide/vue";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer, ChartLegendContent } from "@/components/ui/chart";
import RadarSvg from "./_radar/RadarSvg.vue";

const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

const config = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig;

const series = [
  { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
  { key: "mobile", label: "Mobile", color: "var(--color-mobile)", values: [80, 200, 120, 190, 130, 140] },
];
</script>

<template>
  <Card class="w-full max-w-sm gap-0 py-0">
    <CardHeader class="gap-1 px-6 pt-5.5 pb-0">
      <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Multiple</CardTitle>
      <CardDescription class="text-[13.5px]">Showing total visitors for the last 6 months</CardDescription>
    </CardHeader>
    <CardContent class="items-center px-5 pt-2.5 pb-0">
      <ChartContainer :config="config" class="aspect-auto h-auto w-full">
        <RadarSvg :axes="axes" :series="series" grid="polygon" dots :cy="120" :radius="86" :height="232" />
        <ChartLegendContent />
      </ChartContainer>
    </CardContent>
    <CardFooter class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
      <b class="flex items-center gap-1.5 font-medium">
        Trending up by 5.2% this month
        <TrendingUpIcon class="size-4" />
      </b>
      <span class="text-muted-foreground">January - June 2024</span>
    </CardFooter>
  </Card>
</template>

<script lang="ts">
  import IconPlaceholder from "$lib/components/icon-placeholder/icon-placeholder.svelte";
  import * as Card from "$lib/components/ui/card";
  import * as Chart from "$lib/components/ui/chart";
  import RadarSvg from "./_radar/radar-svg.svelte";

  const axes = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];

  const config = {
    desktop: { label: "Desktop", color: "var(--chart-1)" },
    mobile: { label: "Mobile", color: "var(--chart-2)" },
  } satisfies Chart.ChartConfig;

  const series = [
    { key: "desktop", label: "Desktop", color: "var(--color-desktop)", values: [186, 305, 237, 73, 209, 214] },
    { key: "mobile", label: "Mobile", color: "var(--color-mobile)", values: [80, 200, 120, 190, 130, 140] },
  ];
</script>

<Card.Root class="w-full max-w-sm gap-0 py-0">
  <Card.Header class="gap-1 px-6 pt-5.5 pb-0">
    <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radar Chart - Multiple</Card.Title>
    <Card.Description class="text-[13.5px]">Showing total visitors for the last 6 months</Card.Description>
  </Card.Header>
  <Card.Content class="items-center px-5 pt-2.5 pb-0">
    <Chart.Container {config} class="aspect-auto h-auto w-full flex-col">
      <RadarSvg {axes} {series} grid="polygon" dots cy={120} radius={86} height={232} />
      <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1.5 pt-2.5 text-[12.5px] text-foreground-2">
        {#each series as s (s.key)}
          <div class="flex items-center gap-1.5">
            <span class="size-2 shrink-0 rounded-[2px]" style:background-color={s.color}></span>
            {s.label}
          </div>
        {/each}
      </div>
    </Chart.Container>
  </Card.Content>
  <Card.Footer class="flex-col items-stretch gap-1 px-6 pt-3.5 pb-5.5 text-[13.5px]">
    <b class="flex items-center gap-1.5 font-medium">
      Trending up by 5.2% this month
      <IconPlaceholder lucide="TrendingUpIcon" tabler="IconTrendingUp" hugeicons="ChartUpIcon" phosphor="TrendUpIcon" remixicon="RiArrowUpLine" class="size-4" />
    </b>
    <span class="text-muted-foreground">January - June 2024</span>
  </Card.Footer>
</Card.Root>