{"name":"chart","title":"Chart","description":"Beautiful charts. Built with d3 and Marko — server-rendered, themeable with CSS variables. A shadcn theme's `--chart-1..5` variables restyle every chart with zero changes. Text scales with container width (the SVG uses a fixed viewBox — the price of zero-JS SSR); only the tooltip hydrates.","installCommand":"bunx marko-ui add chart -y","usageTags":", ","importSnippet":"import Chart from \"@/components/ui/chart/chart.marko\";\nimport ChartBar from \"@/components/ui/chart/bar.marko\";","usageSnippet":"static const chartData = [\n { month: \"Jan\", desktop: 186 },\n { month: \"Feb\", desktop: 305 },\n];\nstatic const chartConfig = { desktop: { label: \"Desktop\", color: \"var(--chart-1)\" } };\n\n\n \n <@series dataKey=\"desktop\" radius=4/>\n \n","tags":["Chart","ChartArea","ChartBar","ChartLine","ChartPie","ChartTooltip"],"parts":[],"props":[{"name":"config","type":"ChartConfig","required":true}],"events":[],"keyboard":[],"accessibilityNotes":["Charts are pure SSR SVG plus one small client hydration for hover tooltips — there is no keyboard navigation or `accessibilityLayer`-equivalent focus ring today (upstream's Recharts `accessibilityLayer` prop, which adds keyboard access and screen-reader summaries, has no port here — a component-source gap, not a docs gap).","Chart color is never the only signal in a well-built chart: pair every series color with a label in the legend or tooltip (`ChartConfig.label`) rather than color alone.","The tooltip's indicator + label + value are read together in DOM order, so screen readers announce a coherent row per series when the tooltip is inspected."],"examples":[{"id":"chart-example","title":"Your First Chart","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: { label: \"Desktop\", color: \"#2563eb\" },\n mobile: { label: \"Mobile\", color: \"#60a5fa\" },\n};\n\n\n \n <@series dataKey=\"desktop\" radius=4/>\n <@series dataKey=\"mobile\" radius=4/>\n \n","description":"The minimal composition: `` wrapping a `` with two `@series`, grid and tooltip both off."},{"id":"chart-demo","title":"Bar Chart - Interactive","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\n\nstatic const chartData = [\n { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n];\n\nstatic const chartConfig = {\n views: { label: \"Page Views\" },\n desktop: { label: \"Desktop\", color: \"var(--chart-2)\" },\n mobile: { label: \"Mobile\", color: \"var(--chart-1)\" },\n};\n\nstatic const totals = {\n desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n};\n\nstatic function formatShortDate(value: string): string {\n return new Date(value).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" });\n}\n\nstatic function formatLongDate(value: string): string {\n return new Date(value).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\n}\n\n\n\n\n \n
\n Bar Chart - Interactive\n \n Showing total visitors for the last 3 months\n \n
\n
\n \n \n ${chartConfig[key].label}\n ${totals[key].toLocaleString()}\n \n \n
\n \n \n \n \n <@series dataKey=activeChart/>\n \n \n \n","description":"The hero interactive demo: a series-toggle header swaps which `@series` the chart renders, backed by plain demo-file `` state — no primitive changes needed."},{"id":"chart-example-grid","title":"Add a Grid","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: { label: \"Desktop\", color: \"#2563eb\" },\n mobile: { label: \"Mobile\", color: \"#60a5fa\" },\n};\n\n\n \n <@series dataKey=\"desktop\" radius=4/>\n <@series dataKey=\"mobile\" radius=4/>\n \n","description":"The same chart with `grid` turned on — horizontal `CartesianGrid` lines behind the bars."},{"id":"chart-example-axis","title":"Add an Axis","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: { label: \"Desktop\", color: \"#2563eb\" },\n mobile: { label: \"Mobile\", color: \"#60a5fa\" },\n};\n\n\n value.slice(0, 3)\n tickMargin=10\n tooltip=false\n >\n <@series dataKey=\"desktop\" radius=4/>\n <@series dataKey=\"mobile\" radius=4/>\n \n","description":"Grid plus an `xTickFormatter` that slices each month name down to 3 letters, with `tickMargin=10`."},{"id":"chart-example-tooltip","title":"Add Tooltip","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: { label: \"Desktop\", color: \"#2563eb\" },\n mobile: { label: \"Mobile\", color: \"#60a5fa\" },\n};\n\n\n value.slice(0, 3)\n tickMargin=10\n tooltip\n >\n <@series dataKey=\"desktop\" radius=4/>\n <@series dataKey=\"mobile\" radius=4/>\n \n","description":"Grid, axis, and the default hover tooltip (`tooltip` defaults to `true` — shown here explicitly to match the step-by-step build-up)."},{"id":"chart-example-legend","title":"Add Legend","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: { label: \"Desktop\", color: \"#2563eb\" },\n mobile: { label: \"Mobile\", color: \"#60a5fa\" },\n};\n\n\n value.slice(0, 3)\n tickMargin=10\n tooltip\n legend=\"bottom\"\n >\n <@series dataKey=\"desktop\" radius=4/>\n <@series dataKey=\"mobile\" radius=4/>\n \n","description":"The full build: grid, axis, tooltip, and `legend=\"bottom\"` rendering a ``-equivalent swatch row."},{"id":"chart-bar-default","title":"Bar Chart","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n];\n\nstatic const chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n};\n\n\n \n Bar Chart\n January - June 2024\n \n \n \n value.slice(0, 3)\n tickMargin=10\n cursor=false\n hideLabel\n >\n <@series dataKey=\"desktop\" radius=8/>\n \n \n \n \n
\n Trending up by 5.2% this month\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n","description":"A single-series bar chart. Colors flow from `chartConfig` through `--color-` variables — never resolved in JS."},{"id":"chart-bar-multiple","title":"Bar Chart - Multiple","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n};\n\n\n \n Bar Chart - Multiple\n January - June 2024\n \n \n \n value.slice(0, 3)\n tickMargin=10\n cursor=false\n indicator=\"dashed\"\n >\n <@series dataKey=\"desktop\" radius=4/>\n <@series dataKey=\"mobile\" radius=4/>\n \n \n \n \n
\n Trending up by 5.2% this month\n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n","description":"Multiple `@series` split each band. Pass `indicator=\"dashed\"` to change the tooltip indicator."},{"id":"chart-line-default","title":"Line Chart","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport LineChart from \"@marko-ui/shadcn/ui/chart/line.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n];\n\nstatic const chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n};\n\n\n \n Line Chart\n January - June 2024\n \n \n \n value.slice(0, 3)\n cursor=false\n hideLabel\n >\n <@series dataKey=\"desktop\" type=\"natural\" strokeWidth=2/>\n \n \n \n \n
\n Trending up by 5.2% this month\n \n \n \n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n","description":"A single-series line chart with a natural curve. Pass `dot` on a series to render point markers."},{"id":"chart-line-multiple","title":"Line Chart - Multiple","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport LineChart from \"@marko-ui/shadcn/ui/chart/line.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n};\n\n\n \n Line Chart - Multiple\n January - June 2024\n \n \n \n value.slice(0, 3)\n cursor=false\n >\n <@series dataKey=\"desktop\" type=\"monotone\" strokeWidth=2/>\n <@series dataKey=\"mobile\" type=\"monotone\" strokeWidth=2/>\n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month\n \n \n \n \n
\n
\n Showing total visitors for the last 6 months\n
\n
\n
\n \n","description":"Multiple lines share the same y scale. `type` picks the curve: `natural`, `linear`, `monotone`, or `step`."},{"id":"chart-area-default","title":"Area Chart","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport AreaChart from \"@marko-ui/shadcn/ui/chart/area.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n];\n\nstatic const chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n};\n\n\n \n Area Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n value.slice(0, 3)\n indicator=\"line\"\n cursor=false\n >\n <@series dataKey=\"desktop\" type=\"natural\"/>\n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month\n \n \n \n \n
\n
\n January - June 2024\n
\n
\n
\n \n","description":"A single-series area chart. The fill uses the series color at `fillOpacity` 0.4, like the shadcn demos."},{"id":"chart-area-gradient","title":"Area Chart - Gradient","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport AreaChart from \"@marko-ui/shadcn/ui/chart/area.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n};\n\n\n \n Area Chart - Gradient\n \n Showing total visitors for the last 6 months\n \n \n \n \n value.slice(0, 3)\n cursor=false\n >\n <@series dataKey=\"mobile\" type=\"natural\" stackId=\"a\" gradient/>\n <@series dataKey=\"desktop\" type=\"natural\" stackId=\"a\" gradient/>\n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month\n \n \n \n \n
\n
\n January - June 2024\n
\n
\n
\n \n","description":"Stacked areas with `gradient` fills — per-series `` defs fading the series color from 0.8 to 0.1 opacity."},{"id":"chart-pie-simple","title":"Pie Chart","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport PieChart from \"@marko-ui/shadcn/ui/chart/pie.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n];\n\nstatic const chartConfig = {\n visitors: { label: \"Visitors\" },\n chrome: { label: \"Chrome\", color: \"var(--chart-1)\" },\n safari: { label: \"Safari\", color: \"var(--chart-2)\" },\n firefox: { label: \"Firefox\", color: \"var(--chart-3)\" },\n edge: { label: \"Edge\", color: \"var(--chart-4)\" },\n other: { label: \"Other\", color: \"var(--chart-5)\" },\n};\n\n\n \n Pie Chart\n January - June 2024\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month\n \n \n \n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n","description":"Slice colors come from each row's `fill` (e.g. `var(--color-chrome)`), resolved by the chart's scoped style — exactly like shadcn's pie demos."},{"id":"chart-pie-donut","title":"Pie Chart - Donut with Text","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport PieChart from \"@marko-ui/shadcn/ui/chart/pie.marko\";\nimport Card from \"@marko-ui/shadcn/ui/card/card.marko\";\nimport CardHeader from \"@marko-ui/shadcn/ui/card/header.marko\";\nimport CardTitle from \"@marko-ui/shadcn/ui/card/title.marko\";\nimport CardDescription from \"@marko-ui/shadcn/ui/card/description.marko\";\nimport CardContent from \"@marko-ui/shadcn/ui/card/content.marko\";\nimport CardFooter from \"@marko-ui/shadcn/ui/card/footer.marko\";\n\nstatic const chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n];\n\nstatic const chartConfig = {\n visitors: { label: \"Visitors\" },\n chrome: { label: \"Chrome\", color: \"var(--chart-1)\" },\n safari: { label: \"Safari\", color: \"var(--chart-2)\" },\n firefox: { label: \"Firefox\", color: \"var(--chart-3)\" },\n edge: { label: \"Edge\", color: \"var(--chart-4)\" },\n other: { label: \"Other\", color: \"var(--chart-5)\" },\n};\n\nstatic const totalVisitors = chartData.reduce(\n (acc, curr) => acc + curr.visitors,\n 0,\n);\n\n\n \n Pie Chart - Donut with Text\n January - June 2024\n \n \n \n \n <@centerLabel|{ cx, cy }|>\n \n \n ${totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month\n \n \n \n \n
\n
\n Showing total visitors for the last 6 months\n
\n \n","description":"Pass `innerRadius` for a donut and `centerLabel` to render content in the middle."},{"id":"chart-tooltip","title":"Tooltip Anatomy","source":"import ChartTooltip from \"@marko-ui/shadcn/ui/chart/tooltip.marko\";\n\n
div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n
\n
\n Label\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n Name\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n Indicator\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
","description":"The four tooltip pieces — label, name, value, and indicator — shown at their default sizes with the `indicator` variants (`dot`, `line`, `dashed`)."},{"id":"chart-rtl","title":"RTL","source":"import Chart from \"@marko-ui/shadcn/ui/chart/chart.marko\";\nimport BarChart from \"@marko-ui/shadcn/ui/chart/bar.marko\";\n\nstatic const chartData = [\n { month: \"يناير\", desktop: 186, mobile: 80 },\n { month: \"فبراير\", desktop: 305, mobile: 200 },\n { month: \"مارس\", desktop: 237, mobile: 120 },\n { month: \"أبريل\", desktop: 73, mobile: 190 },\n { month: \"مايو\", desktop: 209, mobile: 130 },\n { month: \"يونيو\", desktop: 214, mobile: 140 },\n];\n\nstatic const chartConfig = {\n desktop: { label: \"سطح المكتب\", color: \"var(--chart-2)\" },\n mobile: { label: \"الجوال\", color: \"var(--chart-1)\" },\n};\n\n
\n \n \n <@series dataKey=\"desktop\" radius=4/>\n <@series dataKey=\"mobile\" radius=4/>\n \n \n
","description":"Static Arabic labels under a `dir=\"rtl\"` wrapper. **Deviation from upstream:** shadcn's RTL demo also mirrors the plot itself (grid orientation, axis direction); our `BarChart` has no `orientation`/`reversed` props yet, so only the labels/legend/tooltip flip — the plot geometry stays left-to-right. Upstream's RTL demo also drives a live language switcher; this one is static Arabic content (locale `ar`)."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{},"nativeAttributes":"div","subcomponents":[{"name":"area","props":[{"name":"config","type":"ChartConfig","required":true,"description":"Same object passed to — Marko has no context, so it's passed twice."},{"name":"data","type":"Row[]","required":true},{"name":"xKey","type":"string","required":true,"description":"Category field for the x axis, e.g. \"month\"."},{"name":"class","type":"string","required":false},{"name":"cursor","type":"boolean","required":false,"description":"Vertical cursor line on hover (recharts default). Shadcn area demos pass false."},{"name":"grid","type":"boolean","required":false,"description":"Horizontal grid lines (recharts )."},{"name":"height","type":"number","required":false},{"name":"hideLabel","type":"boolean","required":false},{"name":"indicator","type":"'line' | 'dot' | 'dashed'","required":false},{"name":"legend","type":"boolean | 'bottom' | 'top'","required":false},{"name":"margin","type":"Partial","required":false},{"name":"stackOffset","type":"'expand'","required":false,"description":"\"expand\" ⇒ 100% stacked (recharts stackOffset=\"expand\"). Requires stacked series."},{"name":"tooltip","type":"boolean","required":false},{"name":"tooltipLabelFormatter","type":"(value: string) => string","required":false,"description":"Applied to the tooltip's label row only (recharts ChartTooltipContent labelFormatter)."},{"name":"width","type":"number","required":false,"description":"viewBox size — the container's CSS aspect scales the drawing."},{"name":"xTickFormatter","type":"(value: string) => string","required":false,"description":"Applied to axis tick labels only (like recharts' XAxis tickFormatter)."},{"name":"xTickMinGap","type":"number","required":false,"description":"Minimum pixel gap between kept x-axis ticks (recharts XAxis minTickGap) — thins dense date-series ticks."},{"name":"yAxis","type":"boolean","required":false},{"name":"yAxisTickCount","type":"number","required":false,"description":"Approximate number of y-axis ticks (recharts YAxis tickCount). Default 5."}],"parts":[{"name":"series","attributes":[{"name":"dataKey","type":"string","required":true},{"name":"type","type":"CurveType","required":false,"description":"Curve type (recharts `type`). Default \"natural\", like the shadcn demos."},{"name":"stackId","type":"string","required":false,"description":"Series sharing a stackId stack on top of each other (declaration order = bottom to top)."},{"name":"gradient","type":"boolean","required":false,"description":"Fill with a per-series fading the series color 0.8 → 0.1."},{"name":"fillOpacity","type":"number","required":false}],"repeatable":true}]},{"name":"bar","props":[{"name":"config","type":"ChartConfig","required":true,"description":"Same object passed to — Marko has no context, so it is passed twice."},{"name":"data","type":"Row[]","required":true},{"name":"xKey","type":"string","required":true},{"name":"activeIndex","type":"number","required":false,"description":"Highlights one bar (fill-opacity 0.8, dashed stroke in its own row.fill color) — mirrors chart-bar-active."},{"name":"categoryTickFormatter","type":"(value: string) => string","required":false,"description":"category-axis tick formatter (Y axis in horizontal layout, X axis otherwise)."},{"name":"class","type":"string","required":false},{"name":"cursor","type":"boolean","required":false,"description":"Tooltip cursor rect behind the hovered band (recharts default)."},{"name":"grid","type":"boolean","required":false,"description":"Horizontal grid lines (recharts ). Default true."},{"name":"height","type":"number","required":false},{"name":"hideIndicator","type":"boolean","required":false},{"name":"hideLabel","type":"boolean","required":false},{"name":"indicator","type":"'line' | 'dot' | 'dashed'","required":false},{"name":"labels","type":"LabelSpec[]","required":false,"description":"Bar (or, in horizontal layout, the single-series bar) LabelList-equivalents."},{"name":"layout","type":"'horizontal'","required":false,"description":"recharts' own (confusing) naming: \"horizontal\" renders HORIZONTAL bars."},{"name":"legend","type":"boolean | 'bottom' | 'top'","required":false},{"name":"margin","type":"Partial","required":false},{"name":"stacked","type":"boolean","required":false},{"name":"tickMargin","type":"number","required":false},{"name":"tooltip","type":"boolean","required":false,"description":"Default true. `false` ⇒ no tooltip panel and no cursor."},{"name":"tooltipLabelFormatter","type":"(value: string) => string","required":false,"description":"Applied to the tooltip's label row only (recharts ChartTooltipContent labelFormatter)."},{"name":"width","type":"number","required":false},{"name":"xTickFormatter","type":"(value: string) => string","required":false},{"name":"xTickMinGap","type":"number","required":false,"description":"Minimum pixel gap between kept x-axis ticks (recharts XAxis minTickGap) — thins dense date-series ticks."},{"name":"yAxis","type":"boolean","required":false,"description":"Render the y axis (default false — shadcn demos hide it)."}],"parts":[{"name":"series","attributes":[{"name":"dataKey","type":"string","required":true},{"name":"radius","type":"CornerRadius","required":false,"description":"recharts Bar radius: number rounds all 4 corners, [tl,tr,br,bl] tuple per corner."}],"repeatable":true}]},{"name":"line","props":[{"name":"config","type":"ChartConfig","required":true,"description":"Same object passed to — Marko has no context, so it travels twice."},{"name":"data","type":"Row[]","required":true},{"name":"xKey","type":"string","required":true},{"name":"class","type":"string","required":false},{"name":"cursor","type":"boolean","required":false,"description":"false ⇒ no hover cursor line. Default true."},{"name":"grid","type":"boolean","required":false,"description":"Horizontal grid lines (recharts ). Default true."},{"name":"height","type":"number","required":false},{"name":"hideLabel","type":"boolean","required":false},{"name":"indicator","type":"'line' | 'dot' | 'dashed'","required":false},{"name":"legend","type":"boolean | 'bottom' | 'top'","required":false},{"name":"margin","type":"Partial","required":false},{"name":"tooltip","type":"boolean","required":false,"description":"false ⇒ no tooltip (and no hover state at all). Default true."},{"name":"tooltipLabelFormatter","type":"(value: string) => string","required":false,"description":"Applied to the tooltip's label row only (recharts ChartTooltipContent labelFormatter)."},{"name":"width","type":"number","required":false},{"name":"xTickFormatter","type":"(value: string) => string","required":false},{"name":"xTickMinGap","type":"number","required":false,"description":"Minimum pixel gap between kept x-axis ticks (recharts XAxis minTickGap) — thins dense date-series ticks."},{"name":"yAxis","type":"boolean","required":false,"description":"Default false — matches the shadcn demos."}],"parts":[{"name":"series","attributes":[{"name":"dataKey","type":"string","required":true},{"name":"type","type":"CurveType","required":false,"description":"Curve type (default \"natural\" — the shadcn line-default demo)."},{"name":"strokeWidth","type":"number","required":false},{"name":"dot","type":"boolean","required":false,"description":"Render point markers (default false — shadcn demos hide dots)."},{"name":"dotColorByRow","type":"boolean","required":false,"description":"Dot fill comes from each row's own `fill` field instead of the series color (chart-line-dots-colors)."},{"name":"dotContent","type":"Marko.AttrTag<{ content: Marko.Body<[{ x: number; y: number; row: Row }]> }>","required":false,"description":"Replaces the default dot with custom content per point (chart-line-dots-custom)."},{"name":"labels","type":"LabelSpec[]","required":false,"description":"LabelList-equivalent: value (or another field) rendered above each point."}],"repeatable":true}]},{"name":"pie","props":[{"name":"config","type":"ChartConfig","required":true,"description":"Same object passed to — Marko has no context, so it's passed twice."},{"name":"data","type":"Row[]","required":true},{"name":"dataKey","type":"string","required":true,"description":"Value field, e.g. \"visitors\"."},{"name":"nameKey","type":"string","required":true,"description":"Category field, e.g. \"browser\"."},{"name":"activeIndex","type":"number","required":false,"description":"Highlights one sector at outerRadius + activeOuterRadiusDelta (default 10) — mirrors chart-pie-donut-active / chart-pie-interactive."},{"name":"activeOuterRadiusDelta","type":"number","required":false},{"name":"class","type":"string","required":false},{"name":"height","type":"number","required":false},{"name":"indicator","type":"'line' | 'dot' | 'dashed'","required":false},{"name":"innerRadius","type":"number","required":false,"description":"Donut when > 0 (recharts default 0)."},{"name":"legend","type":"boolean | 'bottom' | 'top'","required":false},{"name":"outerRadius","type":"number","required":false,"description":"Defaults to 80% of the max radius, like recharts."},{"name":"outsideLabel","type":"boolean","required":false,"description":"Plain numeric-value label with a leader line, positioned outside each slice (recharts' bare `label` prop)."},{"name":"paddingAngle","type":"number","required":false,"description":"Degrees between sectors, like recharts' paddingAngle."},{"name":"rings","type":"PieRing[]","required":false,"description":"Additional concentric rings — e.g. chart-pie-stacked's inner/outer donut pair. `data`'s own ring uses `dataKey`/`nameKey`/`innerRadius`/`outerRadius` above as ring 0."},{"name":"strokeWidth","type":"number","required":false,"description":"Sector border width (recharts Pie strokeWidth, default 1). 0 removes the white separator."},{"name":"tooltip","type":"boolean","required":false},{"name":"width","type":"number","required":false,"description":"viewBox size — the container's CSS aspect scales the drawing."}],"parts":[{"name":"centerLabel","param":"{ cx: number; cy: number; }","description":"Rendered inside the svg, receives the pie center — for donut text."},{"name":"sliceLabel","param":"{ x: number; y: number; row: Row; value: number; index: number; }","description":"Custom label rendered at each slice's centroid — e.g. value-in-foreground-color or category-name-in-background-color."}]},{"name":"tooltip","props":[{"name":"rows","type":"TooltipRow[]","required":true},{"name":"hideIndicator","type":"boolean","required":false},{"name":"hideLabel","type":"boolean","required":false},{"name":"indicator","type":"'line' | 'dot' | 'dashed'","required":false},{"name":"label","type":"string","required":false,"description":"Resolved x label — already run through the chart config by the caller."}],"nativeAttributes":"div"}],"itemTypes":[{"prop":"labels","typeName":"LabelSpec","fields":[{"name":"dataKey","type":"string","required":false,"description":"Which field to render — defaults to the bar's own dataKey (value labels)."},{"name":"position","type":"\"top\" | \"right\" | \"insideLeft\"","required":false},{"name":"color","type":"string","required":false,"description":"CSS color (e.g. \"var(--foreground)\" or \"var(--color-label)\"). Default currentColor via fill-foreground parity class."},{"name":"formatter","type":"(value: string) => string","required":false}]},{"prop":"rings","typeName":"PieRing","fields":[{"name":"data","type":"Row[]","required":true},{"name":"dataKey","type":"string","required":true},{"name":"nameKey","type":"string","required":false},{"name":"innerRadius","type":"number","required":false},{"name":"outerRadius","type":"number","required":false},{"name":"paddingAngle","type":"number","required":false}]},{"prop":"rows","typeName":"TooltipRow","fields":[{"name":"key","type":"string","required":true},{"name":"label","type":"string","required":true},{"name":"value","type":"number | string","required":true},{"name":"color","type":"string","required":true},{"name":"icon","type":"Marko.Renderable","required":false}]}],"concepts":"Every chart takes the same `config` object twice: once on `` (which emits a scoped `