Line Chart

import { LineChart } from "@araf-ds/core"

const data = [
  { date: "Mon", users: 2400, sessions: 1800 },
  { date: "Tue", users: 1398, sessions: 2200 },
  { date: "Wed", users: 9800, sessions: 7200 },
  { date: "Thu", users: 3908, sessions: 2900 },
  { date: "Fri", users: 4800, sessions: 3100 },
  { date: "Sat", users: 3800, sessions: 2400 },
  { date: "Sun", users: 4300, sessions: 2800 },
]

export default function Example() {
  return (
    <LineChart
      data={data}
      dataKey="date"
      lines={[
        { key: "users", label: "Users", color: "#0479CE" },
        { key: "sessions", label: "Sessions", color: "#16A34A" },
      ]}
      height={300}
    />
  )
}

<LineChart
  data={data}
  dataKey="date"
  lines={[{ key: "revenue", label: "Revenue", color: "#0479CE" }]}
  height={300}
/>

<LineChart
  data={data}
  dataKey="date"
  lines={[
    {
      key: "users",
      label: "Active Users",
      color: "#0479CE",
      fill: true,   // enables gradient area under the line
    },
  ]}
  height={300}
/>

<LineChart
  data={data}
  dataKey="date"
  lines={[
    { key: "impressions", label: "Impressions", color: "#0479CE" },
    { key: "clicks", label: "Clicks", color: "#16A34A" },
    { key: "conversions", label: "Conversions", color: "#F59E0B" },
  ]}
  height={300}
  showLegend
/>

<LineChart
  data={data}
  dataKey="date"
  lines={[{ key: "value", label: "Score", color: "#0479CE" }]}
  referenceLines={[
    { y: 80, label: "Target", color: "#DC2626", strokeDasharray: "4 4" },
  ]}
  height={300}
/>