Bar Chart

import { BarChart } from "@/components/ui/bar-chart";

const data = [
  { label: "Jan", value: 186 },
  { label: "Feb", value: 305 },
  { label: "Mar", value: 237 },
  { label: "Apr", value: 173 },
  { label: "May", value: 409 },
  { label: "Jun", value: 214 },
];

export function MyBarChart() {
  return <BarChart data={data} color="#2563eb" />;
}

npx @aniui/cli add bar-chart

import { BarChart } from "@/components/ui/bar-chart";

export function HorizontalBarChart() {
  return <BarChart data={data} horizontal showLabels />;
}

import { BarChart } from "@/components/ui/bar-chart";

const grouped = [
  { key: "desktop", color: "#2563eb" },
  { key: "mobile", color: "#f97316" },
];
const groupedData = [
  { label: "Jan", values: [186, 120] },
  { label: "Feb", values: [305, 210] },
];

// Use stacked bars by passing grouped + groupedData
export function StackedBarChart() {
  return <BarChart data={[]} grouped={grouped} groupedData={groupedData} />;
}

import { BarChart } from "@/components/ui/bar-chart";

// Grouped bars side by side
export function GroupedBarChart() {
  return (
    <BarChart
      data={[]}
      grouped={grouped}
      groupedData={groupedData}
      showLabels
    />
  );
}

import { BarChart } from "@/components/ui/bar-chart";

const data = [
  { label: "Jan", value: 186 },
  { label: "Feb", value: -80 },
  { label: "Mar", value: 237 },
  { label: "Apr", value: -50 },
];

// Negative values render below the baseline
export function NegativeBarChart() {
  return <BarChart data={data} />;
}

import { BarChart } from "@/components/ui/bar-chart";

export function BarChartWithLabels() {
  return (
    <BarChart
      data={data}
      showGrid
      showLabels
      height={220}
    />
  );
}