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

<script lang=\"ts\">\n  import { ArcChart, Text } from 'layerchart';\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 = [{ browser: 'safari', visitors: 200, color: 'var(--color-safari)' }];\n\n  const chartConfig = {\n    visitors: { label: 'Visitors' },\n    safari: { label: 'Safari', 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>Radial Chart - Text</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      <ArcChart\n        label=\"browser\"\n        value=\"visitors\"\n        outerRadius={-20}\n        innerRadius={-12}\n        padding={40}\n        range={[90, -270]}\n        maxValue={300}\n        cornerRadius={20}\n        series={chartData.map((d) => ({\n          key: d.browser,\n          color: d.color,\n          data: [d]\n        }))}\n        props={{\n          arc: {\n            track: { fill: 'color-mix(in srgb, var(--text) 8%, transparent)' },\n            motion: 'tween'\n          },\n          tooltip: { context: { hideDelay: 350 } }\n        }}\n        tooltipContext={false}\n      >\n        {#snippet aboveMarks()}\n          <Text\n            value={String(chartData[0]!.visitors)}\n            textAnchor=\"middle\"\n            verticalAnchor=\"middle\"\n            class=\"fill-(--text) text-4xl! font-bold\"\n            dy={3}\n          />\n          <Text\n            value=\"Visitors\"\n            textAnchor=\"middle\"\n            verticalAnchor=\"middle\"\n            class=\"fill-(--text)/56!\"\n            dy={22}\n          />\n        {/snippet}\n      </ArcChart>\n    </Chart.Container>\n  </Card.Content>\n</Card.Root>\n

"}]}

Charts

Radial Chart - Text