{"name":"chart-radar-default","type":"registry:block","description":"A simple radar chart.","meta":{"description":"A simple radar chart.","iframeHeight":"560px","className":"flex min-h-svh items-center justify-center p-6 [&>*]:max-w-lg"},"files":[{"type":"registry:component","target":"components/chart-radar-default.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { LineChart } from 'layerchart';\n  import { curveLinearClosed } from 'd3-shape';\n  import { scaleBand } from 'd3-scale';\n  import * as Chart from '$lib/components/ui/chart/index.js';\n  import * as Card from '$lib/components/ui/card/index.js';\n\n  const chartData = [\n    { month: 'January', desktop: 186 },\n    { month: 'February', desktop: 305 },\n    { month: 'March', desktop: 237 },\n    { month: 'April', desktop: 273 },\n    { month: 'May', desktop: 209 },\n    { month: 'June', desktop: 214 }\n  ];\n\n  const chartConfig = {\n    desktop: { label: 'Desktop', color: 'var(--chart-1)' }\n  } satisfies Chart.ChartConfig;\n</script>\n\n<Card.Root class=\"w-full\">\n  <Card.Header class=\"items-center\">\n    <Card.Title>Radar Chart</Card.Title>\n    <Card.Description>Showing total visitors for the last 6 months</Card.Description>\n  </Card.Header>\n  <Card.Content>\n    <Chart.Container config={chartConfig} class=\"mx-auto aspect-square w-full max-w-[250px]\">\n      <LineChart\n        data={chartData}\n        series={[{ key: 'desktop', label: 'Desktop', color: chartConfig.desktop.color }]}\n        radial\n        x=\"month\"\n        xScale={scaleBand()}\n        padding={12}\n        props={{\n          spline: {\n            curve: curveLinearClosed,\n            fill: 'var(--color-desktop)',\n            fillOpacity: 0.6,\n            stroke: '0',\n            motion: 'tween'\n          },\n          xAxis: { tickLength: 0 },\n          yAxis: { format: () => '' },\n          grid: { radialY: 'linear' },\n          tooltip: { context: { mode: 'voronoi' } },\n          highlight: { lines: false }\n        }}\n      >\n        {#snippet tooltip()}\n          <Chart.Tooltip />\n        {/snippet}\n      </LineChart>\n    </Chart.Container>\n  </Card.Content>\n</Card.Root>\n

"}]}

Charts

Radar Chart