93:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0_nok25qs0eix.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3xq43ir2t7902.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/15ymjgsba8m5y.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/392jkop5s_22u.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0_nok25qs0eix.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3xq43ir2t7902.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/15ymjgsba8m5y.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/392jkop5s_22u.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_5C5UZhvuThPjvEY6pu7itG5UkbF6"],"SWRDataProvider"] 95:T2f11,[V0_FILE]typescriptreact:file="components/chart-area.tsx" "use client" import { TrendingUp } from "lucide-react" import { Area, AreaChart, CartesianGrid, XAxis } from "recharts" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ] const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, } satisfies ChartConfig export function ChartArea() { return ( Area Chart - Stacked Showing total visitors for the last 6 months value.slice(0, 3)} /> } />

Trending up by 5.2% this month

January - June 2024

) } [V0_FILE]typescriptreact:file="components/chart-bar.tsx" "use client" import { TrendingUp } from "lucide-react" import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "@/components/ui/chart" const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ] const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, } satisfies ChartConfig export function ChartBar() { return ( Bar Chart - Stacked + Legend January - June 2024 value.slice(0, 3)} /> } /> } />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } [V0_FILE]typescriptreact:file="components/chart-pie.tsx" "use client" import * as React from "react" import { TrendingUp } from "lucide-react" import { Label, Pie, PieChart } from "recharts" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const chartData = [ { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" }, { browser: "edge", visitors: 173, fill: "var(--color-edge)" }, { browser: "other", visitors: 190, fill: "var(--color-other)" }, ] const chartConfig = { visitors: { label: "Visitors", }, chrome: { label: "Chrome", color: "hsl(var(--chart-1))", }, safari: { label: "Safari", color: "hsl(var(--chart-2))", }, firefox: { label: "Firefox", color: "hsl(var(--chart-3))", }, edge: { label: "Edge", color: "hsl(var(--chart-4))", }, other: { label: "Other", color: "hsl(var(--chart-5))", }, } satisfies ChartConfig export function ChartPie() { const totalVisitors = React.useMemo(() => { return chartData.reduce((acc, curr) => acc + curr.visitors, 0) }, []) return ( Pie Chart - Donut with Text January - June 2024 } /> { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( {totalVisitors.toLocaleString()} Visitors ) } }} />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } [V0_FILE]typescriptreact:file="components/chart-line.tsx" "use client" import { TrendingUp } from "lucide-react" import { CartesianGrid, Line, LineChart, XAxis } from "recharts" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ] const chartConfig = { desktop: { label: "Desktop", color: "hsl(var(--chart-1))", }, mobile: { label: "Mobile", color: "hsl(var(--chart-2))", }, } satisfies ChartConfig export function ChartLine() { return ( Line Chart - Multiple January - June 2024 value.slice(0, 3)} /> } />

Trending up by 5.2% this month

Showing total visitors for the last 6 months

) } [V0_FILE]typescriptreact:file="app/page.tsx" entry="true" import { ChartArea } from "@/components/chart-area" import { ChartBar } from "@/components/chart-bar" import { ChartLine } from "@/components/chart-line" import { ChartPie } from "@/components/chart-pie" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" entry="true" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" const geistSans = Geist({ subsets: ["latin"], variable: "--font-sans", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono", }) export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } 89:["$","$L93",null,{"chatId":"hZhmdEY1Jyu","children":["$","$L94",null,{"data":{"@\"active-block\",\"hZhmdEY1Jyu\",":{"id":"b_6gHDmjbZsuU","messageId":"FfWXUhH1A9UcYqnfYxfWHVtVUJ6sQqHz","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Next.js + Charts","type":"code-project","project":"Next.js + Charts"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"hZhmdEY1Jyu\",":false,"":null},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from shadcn

More Templates Like This