Bar Chart

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

const data = [
  { month: "Jan", revenue: 4000, expenses: 2400 },
  { month: "Feb", revenue: 3000, expenses: 1398 },
  { month: "Mar", revenue: 5000, expenses: 2800 },
  { month: "Apr", revenue: 2780, expenses: 3908 },
  { month: "May", revenue: 1890, expenses: 4800 },
  { month: "Jun", revenue: 2390, expenses: 3800 },
]

export default function Example() {
  return (
    <BarChart
      data={data}
      dataKey="month"
      bars={[
        { key: "revenue", label: "Revenue", color: "#0479CE" },
        { key: "expenses", label: "Expenses", color: "#CDE4F5" },
      ]}
      height={300}
    />
  )
}

<BarChart
  data={monthlyData}
  dataKey="month"
  bars={[{ key: "revenue", label: "Revenue", color: "#0479CE" }]}
  height={300}
/>

<BarChart
  data={data}
  dataKey="month"
  bars={[
    { key: "revenue", label: "Revenue", color: "#0479CE" },
    { key: "expenses", label: "Expenses", color: "#CDE4F5" },
    { key: "profit", label: "Profit", color: "#16A34A" },
  ]}
  height={300}
  layout="grouped"
/>

<BarChart
  data={data}
  dataKey="month"
  bars={[
    { key: "direct", label: "Direct", color: "#0479CE", stackId: "a" },
    { key: "referral", label: "Referral", color: "#93C5FD", stackId: "a" },
    { key: "organic", label: "Organic", color: "#BFDBFE", stackId: "a" },
  ]}
  layout="stacked"
  height={300}
/>

<BarChart
  data={topPages}
  dataKey="page"
  bars={[{ key: "views", label: "Page Views", color: "#0479CE" }]}
  orientation="horizontal"
  height={300}
/>