Line Chart

"use client";import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";import {  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,  type ChartConfig,} from "@/components/ui/chart";const data = [  { week: "W1", trial: 2.8, paid: 1.2 },  { week: "W2", trial: 3.5, paid: 1.6 },  { week: "W3", trial: 3.2, paid: 1.8 },  { week: "W4", trial: 4.1, paid: 2.2 },  { week: "W5", trial: 4.8, paid: 2.7 },  { week: "W6", trial: 5.4, paid: 3.1 },];const chartConfig = {  trial: {    label: "Trial",    color: "var(--new-home-accent-2)",  },  paid: {    label: "Paid",    color: "var(--new-home-accent-4)",  },} satisfies ChartConfig;export function LineChartDemo() {  return (    <ChartContainer config={chartConfig} className="min-h-[320px] w-full">      <LineChart data={data} margin={{ top: 12, right: 12, left: -12 }}>        <CartesianGrid strokeDasharray="3 3" vertical={false} />        <XAxis dataKey="week" tickLine={false} axisLine={false} />        <YAxis tickLine={false} axisLine={false} width={30} />        <ChartTooltip          content={<ChartTooltipContent formatter={(value) => `${value}%`} />}        />        <ChartLegend content={<ChartLegendContent />} />        <Line          dataKey="trial"          type="monotone"          stroke="var(--color-trial)"          strokeWidth={3}          dot={{ fill: "var(--color-trial)", r: 4 }}          activeDot={{ r: 6 }}        />        <Line          dataKey="paid"          type="monotone"          stroke="var(--color-paid)"          strokeWidth={3}          dot={{ fill: "var(--color-paid)", r: 4 }}          activeDot={{ r: 6 }}        />      </LineChart>    </ChartContainer>  );}