Beautiful Charts
Built using Unovis. Copy and paste into your apps. Open Source.
\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.desktop}\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CChartCrosshair\x3CDataRecord>\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t\x3CChartTooltipContent\n\t\t\t\t\t\t\t\tlabelKey=\"month\"\n\t\t\t\t\t\t\t\tindicator=\"line\"\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\x3C/CardContent>\n\t\t\t\x3CCardFooter>\n\t\t\t\t\x3Cdiv class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t\x3Cdiv class=\"grid gap-2\">\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t\x3Csvg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\x3Cg\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t\x3C/g>\n\t\t\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tJanuary - June 2024\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\x3C/div>\n\t\t\t\t\x3C/div>\n\t\t\t\x3C/CardFooter>\n\t\t\x3C/Card>\n\t);\n};\n\nexport default AreaChart;\n"}]});$R[12]($R[3],$R[13]={name:"area-chart-linear",description:"",files:$R[14]=[$R[15]={path:"src/registry/tailwindcss/charts/area-chart-linear.tsx",type:"registry:block",target:"",content:"import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartCrosshair,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\nimport { CurveType, Position } from \"@unovis/ts\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186 },\n\t{ month: \"February\", desktop: 305 },\n\t{ month: \"March\", desktop: 237 },\n\t{ month: \"April\", desktop: 73 },\n\t{ month: \"May\", desktop: 209 },\n\t{ month: \"June\", desktop: 214 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n} satisfies ChartConfig;\n\nconst AreaChartLinear = () => {\n\treturn (\n\t\t\x3CCard>\n\t\t\t\x3CCardHeader>\n\t\t\t\t\x3CCardTitle>Area Chart - Linear\x3C/CardTitle>\n\t\t\t\t\x3CCardDescription>\n\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\x3C/CardDescription>\n\t\t\t\x3C/CardHeader>\n\t\t\t\x3CCardContent>\n\t\t\t\t\x3CChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 310]}\n\t\t\t\t>\n\t\t\t\t\t\x3CVisArea\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.desktop}\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Linear}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.desktop}\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\tcurveType={CurveType.Linear}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CChartCrosshair\x3CDataRecord>\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t\x3CChartTooltipContent\n\t\t\t\t\t\t\t\tlabelKey=\"month\"\n\t\t\t\t\t\t\t\tindicator=\"dot\"\n\t\t\t\t\t\t\t\thideLabel\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\x3C/CardContent>\n\t\t\t\x3CCardFooter>\n\t\t\t\t\x3Cdiv class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t\x3Cdiv class=\"grid gap-2\">\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t\x3Csvg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\x3Cg\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t\x3C/g>\n\t\t\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tJanuary - June 2024\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\x3C/div>\n\t\t\t\t\x3C/div>\n\t\t\t\x3C/CardFooter>\n\t\t\x3C/Card>\n\t);\n};\n\nexport default AreaChartLinear;\n"}]});$R[12]($R[4],$R[16]={name:"area-chart-step",description:"",files:$R[17]=[$R[18]={path:"src/registry/tailwindcss/charts/area-chart-step.tsx",type:"registry:block",target:"",content:"import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartCrosshair,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\nimport { CurveType, Position } from \"@unovis/ts\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186 },\n\t{ month: \"February\", desktop: 305 },\n\t{ month: \"March\", desktop: 237 },\n\t{ month: \"April\", desktop: 73 },\n\t{ month: \"May\", desktop: 209 },\n\t{ month: \"June\", desktop: 214 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t\ticon: (\n\t\t\t\x3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t\t\t\x3Cpath\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\td=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"\n\t\t\t\t/>\n\t\t\t\x3C/svg>\n\t\t),\n\t},\n} satisfies ChartConfig;\n\nconst AreaChartStep = () => {\n\treturn (\n\t\t\x3CCard>\n\t\t\t\x3CCardHeader>\n\t\t\t\t\x3CCardTitle>Area Chart - Step\x3C/CardTitle>\n\t\t\t\t\x3CCardDescription>\n\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\x3C/CardDescription>\n\t\t\t\x3C/CardHeader>\n\t\t\t\x3CCardContent>\n\t\t\t\t\x3CChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 310]}\n\t\t\t\t>\n\t\t\t\t\t\x3CVisArea\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.desktop}\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Step}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={(d) => d.desktop}\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\tcurveType={CurveType.Step}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CChartCrosshair\x3CDataRecord>\n\t\t\t\t\t\tcolor=\"var(--color-desktop)\"\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t\x3CChartTooltipContent labelKey=\"month\" hideLabel {...props} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\x3C/CardContent>\n\t\t\t\x3CCardFooter>\n\t\t\t\t\x3Cdiv class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t\x3Cdiv class=\"grid gap-2\">\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t\x3Csvg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\x3Cg\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t\x3C/g>\n\t\t\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tJanuary - June 2024\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\x3C/div>\n\t\t\t\t\x3C/div>\n\t\t\t\x3C/CardFooter>\n\t\t\x3C/Card>\n\t);\n};\n\nexport default AreaChartStep;\n"}]});$R[12]($R[5],$R[19]={name:"area-chart-stacked",description:"",files:$R[20]=[$R[21]={path:"src/registry/tailwindcss/charts/area-chart-stacked.tsx",type:"registry:block",target:"",content:"import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartCrosshair,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\nimport { CurveType, Position } from \"@unovis/ts\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n\tmobile: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186, mobile: 80 },\n\t{ month: \"February\", desktop: 305, mobile: 200 },\n\t{ month: \"March\", desktop: 237, mobile: 120 },\n\t{ month: \"April\", desktop: 73, mobile: 190 },\n\t{ month: \"May\", desktop: 209, mobile: 130 },\n\t{ month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tmobile: {\n\t\tlabel: \"Mobile\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n} satisfies ChartConfig;\n\nconst AreaChartStacked = () => {\n\treturn (\n\t\t\x3CCard>\n\t\t\t\x3CCardHeader>\n\t\t\t\t\x3CCardTitle>Area Chart - Stacked\x3C/CardTitle>\n\t\t\t\t\x3CCardDescription>\n\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\x3C/CardDescription>\n\t\t\t\x3C/CardHeader>\n\t\t\t\x3CCardContent>\n\t\t\t\t\x3CChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 620]}\n\t\t\t\t>\n\t\t\t\t\t\x3CVisArea\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CChartCrosshair\x3CDataRecord>\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t\x3CChartTooltipContent labelKey=\"month\" {...props} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\x3C/CardContent>\n\t\t\t\x3CCardFooter>\n\t\t\t\t\x3Cdiv class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t\x3Cdiv class=\"grid gap-2\">\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t\x3Csvg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\x3Cg\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t\x3C/g>\n\t\t\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tJanuary - June 2024\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\x3C/div>\n\t\t\t\t\x3C/div>\n\t\t\t\x3C/CardFooter>\n\t\t\x3C/Card>\n\t);\n};\n\nexport default AreaChartStacked;\n"}]});$R[12]($R[6],$R[22]={name:"area-chart-legend",description:"",files:$R[23]=[$R[24]={path:"src/registry/tailwindcss/charts/area-chart-legend.tsx",type:"registry:block",target:"",content:"import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartCrosshair,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport {\n\tVisArea,\n\tVisAxis,\n\tVisBulletLegend,\n\tVisLine,\n\tVisTooltip,\n} from \"@unovis/solid\";\nimport {\n\ttype BulletLegendItemInterface,\n\tCurveType,\n\tPosition,\n} from \"@unovis/ts\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n\tmobile: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186, mobile: 80 },\n\t{ month: \"February\", desktop: 305, mobile: 200 },\n\t{ month: \"March\", desktop: 237, mobile: 120 },\n\t{ month: \"April\", desktop: 73, mobile: 190 },\n\t{ month: \"May\", desktop: 209, mobile: 130 },\n\t{ month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tmobile: {\n\t\tlabel: \"Mobile\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n} satisfies ChartConfig;\n\nconst AreaChartLegend = () => {\n\tconst items = (): BulletLegendItemInterface[] => {\n\t\treturn Object.entries(chartConfig).map(([_, config]) => ({\n\t\t\tname: config.label,\n\t\t\tcolor: config.color,\n\t\t}));\n\t};\n\n\treturn (\n\t\t\x3CCard>\n\t\t\t\x3CCardHeader>\n\t\t\t\t\x3CCardTitle>Area Chart - Legend\x3C/CardTitle>\n\t\t\t\t\x3CCardDescription>\n\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\x3C/CardDescription>\n\t\t\t\x3C/CardHeader>\n\t\t\t\x3CCardContent>\n\t\t\t\t\x3CChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 620]}\n\t\t\t\t\theight={264}\n\t\t\t\t>\n\t\t\t\t\t\x3CVisArea\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CChartCrosshair\x3CDataRecord>\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t\x3CChartTooltipContent\n\t\t\t\t\t\t\t\tlabelKey=\"month\"\n\t\t\t\t\t\t\t\tindicator=\"line\"\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\t\x3Cdiv class=\"flex items-center justify-center gap-4 pt-3\">\n\t\t\t\t\t\x3CVisBulletLegend items={items()} />\n\t\t\t\t\x3C/div>\n\t\t\t\x3C/CardContent>\n\t\t\t\x3CCardFooter>\n\t\t\t\t\x3Cdiv class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t\x3Cdiv class=\"grid gap-2\">\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t\x3Csvg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\x3Cg\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t\x3C/g>\n\t\t\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tJanuary - June 2024\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\x3C/div>\n\t\t\t\t\x3C/div>\n\t\t\t\x3C/CardFooter>\n\t\t\x3C/Card>\n\t);\n};\n\nexport default AreaChartLegend;\n"}]});$R[12]($R[7],$R[25]={name:"area-chart-gradient",description:"",files:$R[26]=[$R[27]={path:"src/registry/tailwindcss/charts/area-chart-gradient.tsx",type:"registry:block",target:"",content:"import {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartCrosshair,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport { VisArea, VisAxis, VisLine, VisTooltip } from \"@unovis/solid\";\nimport { Area, CurveType, Position } from \"@unovis/ts\";\n\ntype DataRecord = {\n\tmonth: string;\n\tdesktop: number;\n\tmobile: number;\n};\n\nconst data: DataRecord[] = [\n\t{ month: \"January\", desktop: 186, mobile: 80 },\n\t{ month: \"February\", desktop: 305, mobile: 200 },\n\t{ month: \"March\", desktop: 237, mobile: 120 },\n\t{ month: \"April\", desktop: 73, mobile: 190 },\n\t{ month: \"May\", desktop: 209, mobile: 130 },\n\t{ month: \"June\", desktop: 214, mobile: 140 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tmobile: {\n\t\tlabel: \"Mobile\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n} satisfies ChartConfig;\n\nconst AreaChartGradient = () => {\n\treturn (\n\t\t\x3CCard>\n\t\t\t\x3CCardHeader>\n\t\t\t\t\x3CCardTitle>Area Chart - Gradient\x3C/CardTitle>\n\t\t\t\t\x3CCardDescription>\n\t\t\t\t\tShowing total visitors for the last 6 months\n\t\t\t\t\x3C/CardDescription>\n\t\t\t\x3C/CardHeader>\n\t\t\t\x3CCardContent>\n\t\t\t\t\x3CChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 620]}\n\t\t\t\t>\n\t\t\t\t\t\x3Csvg height={0} width={0}>\n\t\t\t\t\t\t\x3Cdefs>\n\t\t\t\t\t\t\t\x3ClinearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\x3C/linearGradient>\n\t\t\t\t\t\t\t\x3ClinearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\x3C/linearGradient>\n\t\t\t\t\t\t\x3C/defs>\n\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\x3CVisArea\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\n\t\t\t\t\t\tcolor=\"auto\"\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(1)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillDesktop)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(2)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillMobile)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => data[d as number].month}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={data.length}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CChartCrosshair\x3CDataRecord>\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t\x3CChartTooltipContent labelKey=\"month\" {...props} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\x3C/CardContent>\n\t\t\t\x3CCardFooter>\n\t\t\t\t\x3Cdiv class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t\t\t\x3Cdiv class=\"grid gap-2\">\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 font-medium leading-none\">\n\t\t\t\t\t\t\tTrending up by 5.2% this month{\" \"}\n\t\t\t\t\t\t\t\x3Csvg\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\tclass=\"size-4\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\x3Cg\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-linejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"m22 7l-8.5 8.5l-5-5L2 17\" />\n\t\t\t\t\t\t\t\t\t\x3Cpath d=\"M16 7h6v6\" />\n\t\t\t\t\t\t\t\t\x3C/g>\n\t\t\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\t\x3Cdiv class=\"flex items-center gap-2 leading-none text-muted-foreground\">\n\t\t\t\t\t\t\tJanuary - June 2024\n\t\t\t\t\t\t\x3C/div>\n\t\t\t\t\t\x3C/div>\n\t\t\t\t\x3C/div>\n\t\t\t\x3C/CardFooter>\n\t\t\x3C/Card>\n\t);\n};\n\nexport default AreaChartGradient;\n"}]});$R[12]($R[8],$R[28]={name:"area-chart-interactive",description:"",files:$R[29]=[$R[30]={path:"src/registry/tailwindcss/charts/area-chart-interactive.tsx",type:"registry:block",target:"",content:"import { useIsMobile } from \"@/hooks/use-mobile\";\nimport {\n\tCard,\n\tCardContent,\n\tCardDescription,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n} from \"@/components/ui/card\";\nimport {\n\ttype ChartConfig,\n\tChartContainer,\n\tChartCrosshair,\n\tChartTooltipContent,\n} from \"@/components/ui/chart\";\nimport {\n\tVisArea,\n\tVisAxis,\n\tVisBrush,\n\tVisBulletLegend,\n\tVisLine,\n\tVisTooltip,\n} from \"@unovis/solid\";\nimport {\n\tArea,\n\ttype BulletLegendItemInterface,\n\tCurveType,\n\tPosition,\n} from \"@unovis/ts\";\nimport { batch, createEffect, createSignal } from \"solid-js\";\n\ntype DataRecord = {\n\tdate: string;\n\tdesktop: number;\n\tmobile: number;\n};\n\nconst data: DataRecord[] = [\n\t{ date: \"2024-04-01\", desktop: 222, mobile: 150 },\n\t{ date: \"2024-04-02\", desktop: 97, mobile: 180 },\n\t{ date: \"2024-04-03\", desktop: 167, mobile: 120 },\n\t{ date: \"2024-04-04\", desktop: 242, mobile: 260 },\n\t{ date: \"2024-04-05\", desktop: 373, mobile: 290 },\n\t{ date: \"2024-04-06\", desktop: 301, mobile: 340 },\n\t{ date: \"2024-04-07\", desktop: 245, mobile: 180 },\n\t{ date: \"2024-04-08\", desktop: 409, mobile: 320 },\n\t{ date: \"2024-04-09\", desktop: 59, mobile: 110 },\n\t{ date: \"2024-04-10\", desktop: 261, mobile: 190 },\n\t{ date: \"2024-04-11\", desktop: 327, mobile: 350 },\n\t{ date: \"2024-04-12\", desktop: 292, mobile: 210 },\n\t{ date: \"2024-04-13\", desktop: 342, mobile: 380 },\n\t{ date: \"2024-04-14\", desktop: 137, mobile: 220 },\n\t{ date: \"2024-04-15\", desktop: 120, mobile: 170 },\n\t{ date: \"2024-04-16\", desktop: 138, mobile: 190 },\n\t{ date: \"2024-04-17\", desktop: 446, mobile: 360 },\n\t{ date: \"2024-04-18\", desktop: 364, mobile: 410 },\n\t{ date: \"2024-04-19\", desktop: 243, mobile: 180 },\n\t{ date: \"2024-04-20\", desktop: 89, mobile: 150 },\n\t{ date: \"2024-04-21\", desktop: 137, mobile: 200 },\n\t{ date: \"2024-04-22\", desktop: 224, mobile: 170 },\n\t{ date: \"2024-04-23\", desktop: 138, mobile: 230 },\n\t{ date: \"2024-04-24\", desktop: 387, mobile: 290 },\n\t{ date: \"2024-04-25\", desktop: 215, mobile: 250 },\n\t{ date: \"2024-04-26\", desktop: 75, mobile: 130 },\n\t{ date: \"2024-04-27\", desktop: 383, mobile: 420 },\n\t{ date: \"2024-04-28\", desktop: 122, mobile: 180 },\n\t{ date: \"2024-04-29\", desktop: 315, mobile: 240 },\n\t{ date: \"2024-04-30\", desktop: 454, mobile: 380 },\n\t{ date: \"2024-05-01\", desktop: 165, mobile: 220 },\n\t{ date: \"2024-05-02\", desktop: 293, mobile: 310 },\n\t{ date: \"2024-05-03\", desktop: 247, mobile: 190 },\n\t{ date: \"2024-05-04\", desktop: 385, mobile: 420 },\n\t{ date: \"2024-05-05\", desktop: 481, mobile: 390 },\n\t{ date: \"2024-05-06\", desktop: 498, mobile: 520 },\n\t{ date: \"2024-05-07\", desktop: 388, mobile: 300 },\n\t{ date: \"2024-05-08\", desktop: 149, mobile: 210 },\n\t{ date: \"2024-05-09\", desktop: 227, mobile: 180 },\n\t{ date: \"2024-05-10\", desktop: 293, mobile: 330 },\n\t{ date: \"2024-05-11\", desktop: 335, mobile: 270 },\n\t{ date: \"2024-05-12\", desktop: 197, mobile: 240 },\n\t{ date: \"2024-05-13\", desktop: 197, mobile: 160 },\n\t{ date: \"2024-05-14\", desktop: 448, mobile: 490 },\n\t{ date: \"2024-05-15\", desktop: 473, mobile: 380 },\n\t{ date: \"2024-05-16\", desktop: 338, mobile: 400 },\n\t{ date: \"2024-05-17\", desktop: 499, mobile: 420 },\n\t{ date: \"2024-05-18\", desktop: 315, mobile: 350 },\n\t{ date: \"2024-05-19\", desktop: 235, mobile: 180 },\n\t{ date: \"2024-05-20\", desktop: 177, mobile: 230 },\n\t{ date: \"2024-05-21\", desktop: 82, mobile: 140 },\n\t{ date: \"2024-05-22\", desktop: 81, mobile: 120 },\n\t{ date: \"2024-05-23\", desktop: 252, mobile: 290 },\n\t{ date: \"2024-05-24\", desktop: 294, mobile: 220 },\n\t{ date: \"2024-05-25\", desktop: 201, mobile: 250 },\n\t{ date: \"2024-05-26\", desktop: 213, mobile: 170 },\n\t{ date: \"2024-05-27\", desktop: 420, mobile: 460 },\n\t{ date: \"2024-05-28\", desktop: 233, mobile: 190 },\n\t{ date: \"2024-05-29\", desktop: 78, mobile: 130 },\n\t{ date: \"2024-05-30\", desktop: 340, mobile: 280 },\n\t{ date: \"2024-05-31\", desktop: 178, mobile: 230 },\n\t{ date: \"2024-06-01\", desktop: 178, mobile: 200 },\n\t{ date: \"2024-06-02\", desktop: 470, mobile: 410 },\n\t{ date: \"2024-06-03\", desktop: 103, mobile: 160 },\n\t{ date: \"2024-06-04\", desktop: 439, mobile: 380 },\n\t{ date: \"2024-06-05\", desktop: 88, mobile: 140 },\n\t{ date: \"2024-06-06\", desktop: 294, mobile: 250 },\n\t{ date: \"2024-06-07\", desktop: 323, mobile: 370 },\n\t{ date: \"2024-06-08\", desktop: 385, mobile: 320 },\n\t{ date: \"2024-06-09\", desktop: 438, mobile: 480 },\n\t{ date: \"2024-06-10\", desktop: 155, mobile: 200 },\n\t{ date: \"2024-06-11\", desktop: 92, mobile: 150 },\n\t{ date: \"2024-06-12\", desktop: 492, mobile: 420 },\n\t{ date: \"2024-06-13\", desktop: 81, mobile: 130 },\n\t{ date: \"2024-06-14\", desktop: 426, mobile: 380 },\n\t{ date: \"2024-06-15\", desktop: 307, mobile: 350 },\n\t{ date: \"2024-06-16\", desktop: 371, mobile: 310 },\n\t{ date: \"2024-06-17\", desktop: 475, mobile: 520 },\n\t{ date: \"2024-06-18\", desktop: 107, mobile: 170 },\n\t{ date: \"2024-06-19\", desktop: 341, mobile: 290 },\n\t{ date: \"2024-06-20\", desktop: 408, mobile: 450 },\n\t{ date: \"2024-06-21\", desktop: 169, mobile: 210 },\n\t{ date: \"2024-06-22\", desktop: 317, mobile: 270 },\n\t{ date: \"2024-06-23\", desktop: 480, mobile: 530 },\n\t{ date: \"2024-06-24\", desktop: 132, mobile: 180 },\n\t{ date: \"2024-06-25\", desktop: 141, mobile: 190 },\n\t{ date: \"2024-06-26\", desktop: 434, mobile: 380 },\n\t{ date: \"2024-06-27\", desktop: 448, mobile: 490 },\n\t{ date: \"2024-06-28\", desktop: 149, mobile: 200 },\n\t{ date: \"2024-06-29\", desktop: 103, mobile: 160 },\n\t{ date: \"2024-06-30\", desktop: 446, mobile: 400 },\n];\n\nconst chartConfig = {\n\tdesktop: {\n\t\tlabel: \"Desktop\",\n\t\tcolor: \"hsl(var(--chart-1))\",\n\t},\n\tmobile: {\n\t\tlabel: \"Mobile\",\n\t\tcolor: \"hsl(var(--chart-2))\",\n\t},\n} satisfies ChartConfig;\n\nconst AreaChartInteractive = () => {\n\tconst items = (): BulletLegendItemInterface[] => {\n\t\treturn Object.entries(chartConfig).map(([_, config]) => ({\n\t\t\tname: config.label,\n\t\t\tcolor: config.color,\n\t\t}));\n\t};\n\n\tconst [duration, setDuration] = createSignal\x3Cnumber | undefined>(0);\n\tconst [domain, setDomain] = createSignal\x3C[number, number]>([\n\t\tdata.findIndex((d) => d.date === \"2024-04-30\"),\n\t\tdata.findIndex((d) => d.date === \"2024-06-01\"),\n\t]);\n\n\tconst isMobile = useIsMobile();\n\n\tconst numTicks = () => {\n\t\tif (isMobile()) {\n\t\t\treturn 4;\n\t\t}\n\t\treturn 15;\n\t};\n\n\treturn (\n\t\t\x3CCard>\n\t\t\t\x3CCardHeader>\n\t\t\t\t\x3CCardTitle>Area Chart - Interactive\x3C/CardTitle>\n\t\t\t\t\x3CCardDescription>\n\t\t\t\t\tShowing total visitors for the last 3 months\n\t\t\t\t\x3C/CardDescription>\n\t\t\t\x3C/CardHeader>\n\t\t\t\x3CCardContent>\n\t\t\t\t\x3CChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\tyDomain={[0, 1600]}\n\t\t\t\t\txDomain={domain()}\n\t\t\t\t\tduration={duration()}\n\t\t\t\t>\n\t\t\t\t\t\x3Csvg height={0} width={0}>\n\t\t\t\t\t\t\x3Cdefs>\n\t\t\t\t\t\t\t\x3ClinearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\x3C/linearGradient>\n\t\t\t\t\t\t\t\x3ClinearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\x3C/linearGradient>\n\t\t\t\t\t\t\x3C/defs>\n\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\x3CVisArea\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\n\t\t\t\t\t\tcolor=\"auto\"\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(1)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillDesktop)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(2)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillMobile)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => {\n\t\t\t\t\t\t\tconst date = new Date(data[d as number].date);\n\t\t\t\t\t\t\treturn date.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\tmonth: \"short\",\n\t\t\t\t\t\t\t\tday: \"numeric\",\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={Math.min(numTicks(), domain()[1] - domain()[0])}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CChartCrosshair\x3CDataRecord>\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\ttemplate={(props) => (\n\t\t\t\t\t\t\t\x3CChartTooltipContent\n\t\t\t\t\t\t\t\tlabelKey=\"date\"\n\t\t\t\t\t\t\t\tlabelFormatter={(d) => {\n\t\t\t\t\t\t\t\t\tconst date = new Date(data[d as number].date);\n\t\t\t\t\t\t\t\t\treturn date.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\t\t\tmonth: \"short\",\n\t\t\t\t\t\t\t\t\t\tday: \"numeric\",\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t{...props}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisTooltip horizontalPlacement={Position.Center} />\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\t\x3Cdiv class=\"flex items-center justify-center gap-4 pt-3\">\n\t\t\t\t\t\x3CVisBulletLegend items={items()} />\n\t\t\t\t\x3C/div>\n\t\t\t\t\x3CChartContainer\n\t\t\t\t\tconfig={chartConfig}\n\t\t\t\t\ttype=\"xy\"\n\t\t\t\t\tdata={data}\n\t\t\t\t\theight={75}\n\t\t\t\t\tpadding={{\n\t\t\t\t\t\ttop: 12,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t\x3Csvg height={0} width={0}>\n\t\t\t\t\t\t\x3Cdefs>\n\t\t\t\t\t\t\t\x3ClinearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\x3C/linearGradient>\n\t\t\t\t\t\t\t\x3ClinearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.8}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\x3Cstop\n\t\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\x3C/linearGradient>\n\t\t\t\t\t\t\x3C/defs>\n\t\t\t\t\t\x3C/svg>\n\t\t\t\t\t\x3CVisArea\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.desktop]}\n\t\t\t\t\t\tcolor=\"auto\"\n\t\t\t\t\t\topacity={0.4}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(1)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillDesktop)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[`${Area.selectors.area}:nth-child(2)`]: {\n\t\t\t\t\t\t\t\tfill: \"url(#fillMobile)\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisLine\x3CDataRecord>\n\t\t\t\t\t\tx={(_, i) => i}\n\t\t\t\t\t\ty={[(d) => d.mobile, (d) => d.mobile + d.desktop]}\n\t\t\t\t\t\tcolor={[\"var(--color-mobile)\", \"var(--color-desktop)\"]}\n\t\t\t\t\t\tcurveType={CurveType.Natural}\n\t\t\t\t\t\tlineWidth={1}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisAxis\x3CDataRecord>\n\t\t\t\t\t\ttype=\"x\"\n\t\t\t\t\t\ttickFormat={(d) => {\n\t\t\t\t\t\t\tconst date = new Date(data[d as number].date);\n\t\t\t\t\t\t\treturn date.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\tmonth: \"short\",\n\t\t\t\t\t\t\t\tday: \"numeric\",\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tgridLine={false}\n\t\t\t\t\t\ttickLine={false}\n\t\t\t\t\t\tdomainLine={false}\n\t\t\t\t\t\tnumTicks={numTicks()}\n\t\t\t\t\t/>\n\t\t\t\t\t\x3CVisBrush\n\t\t\t\t\t\tselection={domain()}\n\t\t\t\t\t\tonBrush={(selection, _, userDriven) => {\n\t\t\t\t\t\t\tif (userDriven)\n\t\t\t\t\t\t\t\tbatch(() => {\n\t\t\t\t\t\t\t\t\tsetDuration(0);\n\t\t\t\t\t\t\t\t\tsetDomain(selection!);\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tdraggable\n\t\t\t\t\t/>\n\t\t\t\t\x3C/ChartContainer>\n\t\t\t\x3C/CardContent>\n\t\t\x3C/Card>\n\t);\n};\n\nexport default AreaChartInteractive;\n"}]});$R[12]($R[0],!0);
Built using Unovis. Copy and paste into your apps. Open Source.