Radial Chart
Progress or share on concentric arcs with round caps, a neutral track and the headline number in the centre.
Radial charts show progress or share on concentric arcs, with the headline number in the centre. Installation and the shared API live on the Chart page.
Radial
Section titled “Radial”import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart";import { RadialBar, RadialBarChart } from "recharts";
const data = [ { browser: "other", visitors: 90, fill: "var(--color-other)" }, { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },];const config = { visitors: { label: "Visitors" }, chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" },} satisfies ChartConfig;
export default function Demo() { return ( <Card className="w-full max-w-sm gap-0 py-0"> <CardHeader className="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle className="font-semibold text-base tracking-[-0.2px]"> Radial Chart </CardTitle> <CardDescription className="text-[13.5px]"> January - June 2024 </CardDescription> </CardHeader> <CardContent className="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer config={config} className="mx-auto aspect-square max-h-60 w-full" > <RadialBarChart data={data} startAngle={90} endAngle={-180} innerRadius={29} outerRadius={115} > <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="browser" />} /> <RadialBar dataKey="visitors" background cornerRadius={7} barSize={14} /> </RadialBarChart> </ChartContainer> </CardContent> <CardFooter className="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b className="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <path d="m22 7-8.5 8.5-5-5L2 17" /> <path d="M16 7h6v6" /> </svg> </b> <span className="text-muted-foreground"> Showing total visitors for the last 6 months </span> </CardFooter> </Card> );}<script setup lang="ts">import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
const config = { chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" },} satisfies ChartConfig;</script>
<template> <Card class="w-full max-w-sm gap-0 py-0"> <CardHeader class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radial Chart</CardTitle> <CardDescription class="text-[13.5px]">January - June 2024</CardDescription> </CardHeader> <CardContent class="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer :config="config" class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="var(--color-chrome)" stroke-width="14" stroke-linecap="round"><title>Chrome: 275</title></path> <path d="M128.0,30.0A90,90 0 1 1 38.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,30.0A90,90 0 1 1 102.6,206.4" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <path d="M128.0,48.0A72,72 0 1 1 56.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,48.0A72,72 0 1 1 123.5,191.9" fill="none" stroke="var(--color-firefox)" stroke-width="14" stroke-linecap="round"><title>Firefox: 187</title></path> <path d="M128.0,66.0A54,54 0 1 1 74.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,66.0A54,54 0 0 1 137.5,173.2" fill="none" stroke="var(--color-edge)" stroke-width="14" stroke-linecap="round"><title>Edge: 173</title></path> <path d="M128.0,84.0A36,36 0 1 1 92.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,84.0A36,36 0 0 1 164.0,119.0" fill="none" stroke="var(--color-other)" stroke-width="14" stroke-linecap="round"><title>Other: 90</title></path> </svg> </ChartContainer> </CardContent> <CardFooter class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </CardFooter> </Card></template><script lang="ts"> import * as Card from "$lib/components/ui/card"; import * as Chart from "$lib/components/ui/chart";
const config = { chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" }, } satisfies Chart.ChartConfig;</script>
<Card.Root class="w-full max-w-sm gap-0 py-0"> <Card.Header class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radial Chart</Card.Title> <Card.Description class="text-[13.5px]">January - June 2024</Card.Description> </Card.Header> <Card.Content class="flex-1 items-center px-5 pt-2.5 pb-0"> <Chart.Container {config} class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="var(--color-chrome)" stroke-width="14" stroke-linecap="round"><title>Chrome: 275</title></path> <path d="M128.0,30.0A90,90 0 1 1 38.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,30.0A90,90 0 1 1 102.6,206.4" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <path d="M128.0,48.0A72,72 0 1 1 56.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,48.0A72,72 0 1 1 123.5,191.9" fill="none" stroke="var(--color-firefox)" stroke-width="14" stroke-linecap="round"><title>Firefox: 187</title></path> <path d="M128.0,66.0A54,54 0 1 1 74.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,66.0A54,54 0 0 1 137.5,173.2" fill="none" stroke="var(--color-edge)" stroke-width="14" stroke-linecap="round"><title>Edge: 173</title></path> <path d="M128.0,84.0A36,36 0 1 1 92.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,84.0A36,36 0 0 1 164.0,119.0" fill="none" stroke="var(--color-other)" stroke-width="14" stroke-linecap="round"><title>Other: 90</title></path> </svg> </Chart.Container> </Card.Content> <Card.Footer class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </Card.Footer></Card.Root>import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart";import { LabelList, RadialBar, RadialBarChart } from "recharts";
const data = [ { browser: "other", visitors: 90, fill: "var(--color-other)" }, { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },];const config = { visitors: { label: "Visitors" }, chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" },} satisfies ChartConfig;
export default function Demo() { return ( <Card className="w-full max-w-sm gap-0 py-0"> <CardHeader className="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle className="font-semibold text-base tracking-[-0.2px]"> Radial Chart - Label </CardTitle> <CardDescription className="text-[13.5px]"> January - June 2024 </CardDescription> </CardHeader> <CardContent className="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer config={config} className="mx-auto aspect-square max-h-60 w-full" > <RadialBarChart data={data} startAngle={90} endAngle={-180} innerRadius={29} outerRadius={115} > <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="browser" />} /> <RadialBar dataKey="visitors" background cornerRadius={7} barSize={14} > <LabelList position="insideStart" dataKey="browser" className="fill-foreground font-medium capitalize" fontSize={11} /> </RadialBar> </RadialBarChart> </ChartContainer> </CardContent> <CardFooter className="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b className="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <path d="m22 7-8.5 8.5-5-5L2 17" /> <path d="M16 7h6v6" /> </svg> </b> <span className="text-muted-foreground"> Showing total visitors for the last 6 months </span> </CardFooter> </Card> );}<script setup lang="ts">import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
const config = { chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" },} satisfies ChartConfig;</script>
<template> <Card class="w-full max-w-sm gap-0 py-0"> <CardHeader class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Label</CardTitle> <CardDescription class="text-[13.5px]">January - June 2024</CardDescription> </CardHeader> <CardContent class="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer :config="config" class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="var(--color-chrome)" stroke-width="14" stroke-linecap="round"><title>Chrome: 275</title></path> <text x="120" y="23" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Chrome</text> <path d="M128.0,30.0A90,90 0 1 1 38.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,30.0A90,90 0 1 1 102.6,206.4" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <text x="120" y="41" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Safari</text> <path d="M128.0,48.0A72,72 0 1 1 56.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,48.0A72,72 0 1 1 123.5,191.9" fill="none" stroke="var(--color-firefox)" stroke-width="14" stroke-linecap="round"><title>Firefox: 187</title></path> <text x="120" y="59" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Firefox</text> <path d="M128.0,66.0A54,54 0 1 1 74.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,66.0A54,54 0 0 1 137.5,173.2" fill="none" stroke="var(--color-edge)" stroke-width="14" stroke-linecap="round"><title>Edge: 173</title></path> <text x="120" y="77" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Edge</text> <path d="M128.0,84.0A36,36 0 1 1 92.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,84.0A36,36 0 0 1 164.0,119.0" fill="none" stroke="var(--color-other)" stroke-width="14" stroke-linecap="round"><title>Other: 90</title></path> <text x="120" y="95" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Other</text> </svg> </ChartContainer> </CardContent> <CardFooter class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </CardFooter> </Card></template><script lang="ts"> import * as Card from "$lib/components/ui/card"; import * as Chart from "$lib/components/ui/chart";
const config = { chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" }, } satisfies Chart.ChartConfig;</script>
<Card.Root class="w-full max-w-sm gap-0 py-0"> <Card.Header class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Label</Card.Title> <Card.Description class="text-[13.5px]">January - June 2024</Card.Description> </Card.Header> <Card.Content class="flex-1 items-center px-5 pt-2.5 pb-0"> <Chart.Container {config} class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="var(--color-chrome)" stroke-width="14" stroke-linecap="round"><title>Chrome: 275</title></path> <text x="120" y="23" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Chrome</text> <path d="M128.0,30.0A90,90 0 1 1 38.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,30.0A90,90 0 1 1 102.6,206.4" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <text x="120" y="41" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Safari</text> <path d="M128.0,48.0A72,72 0 1 1 56.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,48.0A72,72 0 1 1 123.5,191.9" fill="none" stroke="var(--color-firefox)" stroke-width="14" stroke-linecap="round"><title>Firefox: 187</title></path> <text x="120" y="59" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Firefox</text> <path d="M128.0,66.0A54,54 0 1 1 74.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,66.0A54,54 0 0 1 137.5,173.2" fill="none" stroke="var(--color-edge)" stroke-width="14" stroke-linecap="round"><title>Edge: 173</title></path> <text x="120" y="77" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Edge</text> <path d="M128.0,84.0A36,36 0 1 1 92.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,84.0A36,36 0 0 1 164.0,119.0" fill="none" stroke="var(--color-other)" stroke-width="14" stroke-linecap="round"><title>Other: 90</title></path> <text x="120" y="95" text-anchor="end" class="fill-foreground" font-size="11" font-weight="500">Other</text> </svg> </Chart.Container> </Card.Content> <Card.Footer class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </Card.Footer></Card.Root>import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart";import { PolarGrid, RadialBar, RadialBarChart } from "recharts";
const data = [ { browser: "other", visitors: 90, fill: "var(--color-other)" }, { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, { browser: "firefox", visitors: 187, fill: "var(--color-firefox)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },];const config = { visitors: { label: "Visitors" }, chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" },} satisfies ChartConfig;
export default function Demo() { return ( <Card className="w-full max-w-sm gap-0 py-0"> <CardHeader className="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle className="font-semibold text-base tracking-[-0.2px]"> Radial Chart - Grid </CardTitle> <CardDescription className="text-[13.5px]"> January - June 2024 </CardDescription> </CardHeader> <CardContent className="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer config={config} className="mx-auto aspect-square max-h-60 w-full" > <RadialBarChart data={data} startAngle={90} endAngle={-180} innerRadius={29} outerRadius={115} > <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel nameKey="browser" />} /> <PolarGrid gridType="circle" /> <RadialBar dataKey="visitors" background cornerRadius={7} barSize={14} /> </RadialBarChart> </ChartContainer> </CardContent> <CardFooter className="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b className="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <path d="m22 7-8.5 8.5-5-5L2 17" /> <path d="M16 7h6v6" /> </svg> </b> <span className="text-muted-foreground"> Showing total visitors for the last 6 months </span> </CardFooter> </Card> );}<script setup lang="ts">import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
const config = { chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" },} satisfies ChartConfig;</script>
<template> <Card class="w-full max-w-sm gap-0 py-0"> <CardHeader class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Grid</CardTitle> <CardDescription class="text-[13.5px]">January - June 2024</CardDescription> </CardHeader> <CardContent class="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer :config="config" class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <circle cx="128" cy="120" r="18" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="36" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="54" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="72" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="90" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="108" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="var(--color-chrome)" stroke-width="14" stroke-linecap="round"><title>Chrome: 275</title></path> <path d="M128.0,30.0A90,90 0 1 1 38.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,30.0A90,90 0 1 1 102.6,206.4" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <path d="M128.0,48.0A72,72 0 1 1 56.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,48.0A72,72 0 1 1 123.5,191.9" fill="none" stroke="var(--color-firefox)" stroke-width="14" stroke-linecap="round"><title>Firefox: 187</title></path> <path d="M128.0,66.0A54,54 0 1 1 74.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,66.0A54,54 0 0 1 137.5,173.2" fill="none" stroke="var(--color-edge)" stroke-width="14" stroke-linecap="round"><title>Edge: 173</title></path> <path d="M128.0,84.0A36,36 0 1 1 92.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,84.0A36,36 0 0 1 164.0,119.0" fill="none" stroke="var(--color-other)" stroke-width="14" stroke-linecap="round"><title>Other: 90</title></path> </svg> </ChartContainer> </CardContent> <CardFooter class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </CardFooter> </Card></template><script lang="ts"> import * as Card from "$lib/components/ui/card"; import * as Chart from "$lib/components/ui/chart";
const config = { chrome: { label: "Chrome", color: "var(--chart-1)" }, safari: { label: "Safari", color: "var(--chart-2)" }, firefox: { label: "Firefox", color: "var(--chart-3)" }, edge: { label: "Edge", color: "var(--chart-4)" }, other: { label: "Other", color: "var(--chart-5)" }, } satisfies Chart.ChartConfig;</script>
<Card.Root class="w-full max-w-sm gap-0 py-0"> <Card.Header class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Grid</Card.Title> <Card.Description class="text-[13.5px]">January - June 2024</Card.Description> </Card.Header> <Card.Content class="flex-1 items-center px-5 pt-2.5 pb-0"> <Chart.Container {config} class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <circle cx="128" cy="120" r="18" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="36" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="54" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="72" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="90" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <circle cx="128" cy="120" r="108" fill="none" stroke="color-mix(in srgb,var(--border) 75%,var(--card))" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,12.0A108,108 0 1 1 20.0,120.0" fill="none" stroke="var(--color-chrome)" stroke-width="14" stroke-linecap="round"><title>Chrome: 275</title></path> <path d="M128.0,30.0A90,90 0 1 1 38.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,30.0A90,90 0 1 1 102.6,206.4" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <path d="M128.0,48.0A72,72 0 1 1 56.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,48.0A72,72 0 1 1 123.5,191.9" fill="none" stroke="var(--color-firefox)" stroke-width="14" stroke-linecap="round"><title>Firefox: 187</title></path> <path d="M128.0,66.0A54,54 0 1 1 74.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,66.0A54,54 0 0 1 137.5,173.2" fill="none" stroke="var(--color-edge)" stroke-width="14" stroke-linecap="round"><title>Edge: 173</title></path> <path d="M128.0,84.0A36,36 0 1 1 92.0,120.0" fill="none" stroke="color-mix(in srgb,var(--foreground) 7%,var(--card))" stroke-width="14" stroke-linecap="round" /> <path d="M128.0,84.0A36,36 0 0 1 164.0,119.0" fill="none" stroke="var(--color-other)" stroke-width="14" stroke-linecap="round"><title>Other: 90</title></path> </svg> </Chart.Container> </Card.Content> <Card.Footer class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </Card.Footer></Card.Root>import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart";import { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart,} from "recharts";
const data = [ { browser: "safari", visitors: 200, fill: "var(--color-safari)" },];
const config = { visitors: { label: "Visitors" }, safari: { label: "Safari", color: "var(--chart-1)" },} satisfies ChartConfig;
export default function Demo() { return ( <Card className="w-full max-w-sm gap-0 py-0"> <CardHeader className="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle className="font-semibold text-base tracking-[-0.2px]"> Radial Chart - Text </CardTitle> <CardDescription className="text-[13.5px]"> January - June 2024 </CardDescription> </CardHeader> <CardContent className="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer config={config} className="mx-auto aspect-square max-h-60 w-full" > <RadialBarChart data={data} startAngle={90} endAngle={-270} innerRadius={89} outerRadius={103} > <PolarAngleAxis type="number" domain={[0, 400]} tick={false} /> <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> <RadialBar dataKey="visitors" cornerRadius={7} /> <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}> <Label content={({ viewBox }) => { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle" > <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground font-semibold text-4xl tracking-[-1px]" > {data[0].visitors.toLocaleString()} </tspan> <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground text-xs" > Visitors </tspan> </text> ); } }} /> </PolarRadiusAxis> </RadialBarChart> </ChartContainer> </CardContent> <CardFooter className="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b className="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <path d="m22 7-8.5 8.5-5-5L2 17" /> <path d="M16 7h6v6" /> </svg> </b> <span className="text-muted-foreground"> Showing total visitors for the last 6 months </span> </CardFooter> </Card> );}<script setup lang="ts">import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
const config = { safari: { label: "Safari", color: "var(--chart-1)" },} satisfies ChartConfig;</script>
<template> <Card class="w-full max-w-sm gap-0 py-0"> <CardHeader class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Text</CardTitle> <CardDescription class="text-[13.5px]">January - June 2024</CardDescription> </CardHeader> <CardContent class="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer :config="config" class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,24.0A96,96 0 0 1 128.0,216.0" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <text x="128" y="118" text-anchor="middle" class="fill-foreground" font-size="34" font-weight="600" letter-spacing="-1">200</text> <text x="128" y="138" text-anchor="middle" class="fill-muted-foreground" font-size="12">Visitors</text> </svg> </ChartContainer> </CardContent> <CardFooter class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </CardFooter> </Card></template><script lang="ts"> import * as Card from "$lib/components/ui/card"; import * as Chart from "$lib/components/ui/chart";
const config = { safari: { label: "Safari", color: "var(--chart-1)" }, } satisfies Chart.ChartConfig;</script>
<Card.Root class="w-full max-w-sm gap-0 py-0"> <Card.Header class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Text</Card.Title> <Card.Description class="text-[13.5px]">January - June 2024</Card.Description> </Card.Header> <Card.Content class="flex-1 items-center px-5 pt-2.5 pb-0"> <Chart.Container {config} class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,24.0A96,96 0 0 1 128.0,216.0" fill="none" stroke="var(--color-safari)" stroke-width="14" stroke-linecap="round"><title>Safari: 200</title></path> <text x="128" y="118" text-anchor="middle" class="fill-foreground" font-size="34" font-weight="600" letter-spacing="-1">200</text> <text x="128" y="138" text-anchor="middle" class="fill-muted-foreground" font-size="12">Visitors</text> </svg> </Chart.Container> </Card.Content> <Card.Footer class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </Card.Footer></Card.Root>import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart";import { Label, PolarAngleAxis, PolarRadiusAxis, RadialBar, RadialBarChart,} from "recharts";
const data = [ { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },];
const config = { visitors: { label: "Visitors" }, safari: { label: "Safari", color: "var(--chart-1)" },} satisfies ChartConfig;
export default function Demo() { return ( <Card className="w-full max-w-sm gap-0 py-0"> <CardHeader className="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle className="font-semibold text-base tracking-[-0.2px]"> Radial Chart - Shape </CardTitle> <CardDescription className="text-[13.5px]"> January - June 2024 </CardDescription> </CardHeader> <CardContent className="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer config={config} className="mx-auto aspect-square max-h-60 w-full" > <RadialBarChart data={data} startAngle={90} endAngle={-270} innerRadius={81} outerRadius={103} > <PolarAngleAxis type="number" domain={[0, 2000]} tick={false} /> <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> <RadialBar dataKey="visitors" cornerRadius={11} /> <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}> <Label content={({ viewBox }) => { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle" > <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground font-semibold text-4xl tracking-[-1px]" > {data[0].visitors.toLocaleString()} </tspan> <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground text-xs" > Visitors </tspan> </text> ); } }} /> </PolarRadiusAxis> </RadialBarChart> </ChartContainer> </CardContent> <CardFooter className="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b className="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <path d="m22 7-8.5 8.5-5-5L2 17" /> <path d="M16 7h6v6" /> </svg> </b> <span className="text-muted-foreground"> Showing total visitors for the last 6 months </span> </CardFooter> </Card> );}<script setup lang="ts">import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
const config = { safari: { label: "Safari", color: "var(--chart-1)" },} satisfies ChartConfig;</script>
<template> <Card class="w-full max-w-sm gap-0 py-0"> <CardHeader class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Shape</CardTitle> <CardDescription class="text-[13.5px]">January - June 2024</CardDescription> </CardHeader> <CardContent class="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer :config="config" class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,28.0A92,92 0 1 1 60.9,183.0" fill="none" stroke="var(--color-safari)" stroke-width="22" stroke-linecap="round"><title>Safari: 1,260</title></path> <text x="128" y="118" text-anchor="middle" class="fill-foreground" font-size="30" font-weight="600" letter-spacing="-1">1,260</text> <text x="128" y="138" text-anchor="middle" class="fill-muted-foreground" font-size="12">Visitors</text> </svg> </ChartContainer> </CardContent> <CardFooter class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </CardFooter> </Card></template><script lang="ts"> import * as Card from "$lib/components/ui/card"; import * as Chart from "$lib/components/ui/chart";
const config = { safari: { label: "Safari", color: "var(--chart-1)" }, } satisfies Chart.ChartConfig;</script>
<Card.Root class="w-full max-w-sm gap-0 py-0"> <Card.Header class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Shape</Card.Title> <Card.Description class="text-[13.5px]">January - June 2024</Card.Description> </Card.Header> <Card.Content class="flex-1 items-center px-5 pt-2.5 pb-0"> <Chart.Container {config} class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 240" role="img" class="mx-auto aspect-square max-h-60 w-full"> <path d="M128.0,28.0A92,92 0 1 1 60.9,183.0" fill="none" stroke="var(--color-safari)" stroke-width="22" stroke-linecap="round"><title>Safari: 1,260</title></path> <text x="128" y="118" text-anchor="middle" class="fill-foreground" font-size="30" font-weight="600" letter-spacing="-1">1,260</text> <text x="128" y="138" text-anchor="middle" class="fill-muted-foreground" font-size="12">Visitors</text> </svg> </Chart.Container> </Card.Content> <Card.Footer class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </Card.Footer></Card.Root>Stacked
Section titled “Stacked”import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent,} from "@/components/ui/chart";import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";
const data = [{ month: "january", desktop: 1260, mobile: 570 }];
const config = { desktop: { label: "Desktop", color: "var(--chart-1)" }, mobile: { label: "Mobile", color: "var(--chart-2)" },} satisfies ChartConfig;
const total = data[0].desktop + data[0].mobile;
export default function Demo() { return ( <Card className="w-full max-w-sm gap-0 py-0"> <CardHeader className="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle className="font-semibold text-base tracking-[-0.2px]"> Radial Chart - Stacked </CardTitle> <CardDescription className="text-[13.5px]"> January - June 2024 </CardDescription> </CardHeader> <CardContent className="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer config={config} className="mx-auto aspect-[2/1] max-h-60 w-full" > <RadialBarChart data={data} startAngle={180} endAngle={0} cy="85%" innerRadius={89} outerRadius={111} > <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}> <Label content={({ viewBox }) => { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle"> <tspan x={viewBox.cx} y={(viewBox.cy || 0) - 16} className="fill-foreground font-semibold text-3xl tracking-[-1px]" > {total.toLocaleString()} </tspan> <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 2} className="fill-muted-foreground text-xs" > Visitors </tspan> </text> ); } }} /> </PolarRadiusAxis> <RadialBar dataKey="desktop" stackId="a" cornerRadius={0} fill="var(--color-desktop)" stroke="var(--card)" strokeWidth={2} /> <RadialBar dataKey="mobile" stackId="a" cornerRadius={0} fill="var(--color-mobile)" stroke="var(--card)" strokeWidth={2} /> <ChartLegend content={<ChartLegendContent />} verticalAlign="bottom" /> </RadialBarChart> </ChartContainer> </CardContent> <CardFooter className="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b className="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" > <path d="m22 7-8.5 8.5-5-5L2 17" /> <path d="M16 7h6v6" /> </svg> </b> <span className="text-muted-foreground"> Showing total visitors for the last 6 months </span> </CardFooter> </Card> );}<script setup lang="ts">import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,} from "@/components/ui/card";import { type ChartConfig, ChartContainer, ChartLegendContent } from "@/components/ui/chart";
const config = { desktop: { label: "Desktop", color: "var(--chart-1)" }, mobile: { label: "Mobile", color: "var(--chart-2)" },} satisfies ChartConfig;</script>
<template> <Card class="w-full max-w-sm gap-0 py-0"> <CardHeader class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <CardTitle class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Stacked</CardTitle> <CardDescription class="text-[13.5px]">January - June 2024</CardDescription> </CardHeader> <CardContent class="flex-1 items-center px-5 pt-2.5 pb-0"> <ChartContainer :config="config" class="aspect-auto h-auto w-full"> <svg viewBox="0 0 256 210" role="img" class="mx-auto aspect-[256/210] max-h-52 w-full"> <path d="M28.0,140.0A100,100 0 0 1 183.0,56.5" fill="none" stroke="var(--color-desktop)" stroke-width="22"><title>Desktop: 1,260</title></path> <path d="M184.7,57.6A100,100 0 0 1 228.0,140.0" fill="none" stroke="var(--color-mobile)" stroke-width="22"><title>Mobile: 570</title></path> <text x="128" y="120" text-anchor="middle" class="fill-foreground" font-size="28" font-weight="600" letter-spacing="-1">1,830</text> <text x="128" y="140" text-anchor="middle" class="fill-muted-foreground" font-size="12">Visitors</text> </svg> <ChartLegendContent /> </ChartContainer> </CardContent> <CardFooter class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </CardFooter> </Card></template><script lang="ts"> import * as Card from "$lib/components/ui/card"; import * as Chart from "$lib/components/ui/chart";
const config = { desktop: { label: "Desktop", color: "var(--chart-1)" }, mobile: { label: "Mobile", color: "var(--chart-2)" }, } satisfies Chart.ChartConfig;</script>
<Card.Root class="w-full max-w-sm gap-0 py-0"> <Card.Header class="items-center gap-1 px-6 pt-5.5 pb-0 text-center"> <Card.Title class="font-semibold text-base tracking-[-0.2px]">Radial Chart - Stacked</Card.Title> <Card.Description class="text-[13.5px]">January - June 2024</Card.Description> </Card.Header> <Card.Content class="flex-1 items-center px-5 pt-2.5 pb-0"> <Chart.Container {config} class="aspect-auto h-auto w-full flex-col"> <svg viewBox="0 0 256 210" role="img" class="mx-auto aspect-[256/210] max-h-52 w-full"> <path d="M28.0,140.0A100,100 0 0 1 183.0,56.5" fill="none" stroke="var(--color-desktop)" stroke-width="22"><title>Desktop: 1,260</title></path> <path d="M184.7,57.6A100,100 0 0 1 228.0,140.0" fill="none" stroke="var(--color-mobile)" stroke-width="22"><title>Mobile: 570</title></path> <text x="128" y="120" text-anchor="middle" class="fill-foreground" font-size="28" font-weight="600" letter-spacing="-1">1,830</text> <text x="128" y="140" text-anchor="middle" class="fill-muted-foreground" font-size="12">Visitors</text> </svg> <div data-slot="chart-legend" 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 ["desktop", "mobile"] as const as key (key)} <div class="flex items-center gap-1.5"> <div class="size-2 shrink-0 rounded-[2px]" style="background-color: var(--color-{key})"></div> {config[key].label} </div> {/each} </div> </Chart.Container> </Card.Content> <Card.Footer class="flex-col items-center gap-1 px-6 pt-3.5 pb-5.5 text-center text-[13.5px]"> <b class="inline-flex items-center gap-2 font-medium"> Trending up by 5.2% this month <svg viewBox="0 0 24 24" class="size-3.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m22 7-8.5 8.5-5-5L2 17" /><path d="M16 7h6v6" /></svg> </b> <span class="text-muted-foreground">Showing total visitors for the last 6 months</span> </Card.Footer></Card.Root>