Area Chart

import { AreaChart } from "@/components/ui/area-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 MyChart() {
  return <AreaChart data={data} color="#2563eb" />;
}

npx @aniui/cli add area-chart

import { AreaChart } from "@/components/ui/area-chart";

const series = [
  {
    data: [
      { label: "Jan", value: 186 },
      { label: "Feb", value: 305 },
      { label: "Mar", value: 237 },
    ],
    color: "#2563eb",
  },
  {
    data: [
      { label: "Jan", value: 120 },
      { label: "Feb", value: 210 },
      { label: "Mar", value: 180 },
    ],
    color: "#f97316",
  },
];

export function StackedAreaChart() {
  return <AreaChart data={series[0].data} series={series} />;
}

import { AreaChart } from "@/components/ui/area-chart";

export function StepAreaChart() {
  return <AreaChart data={data} curved={false} />;
}

import { AreaChart } from "@/components/ui/area-chart";

export function GradientAreaChart() {
  return <AreaChart data={data} color="#8b5cf6" fillOpacity={0.5} />;
}

import { AreaChart } from "@/components/ui/area-chart";
import { ChartTooltip } from "@/components/ui/chart-tooltip";

// The AreaChart component supports press interactions
// Wrap with a tooltip for interactive data display
export function InteractiveAreaChart() {
  return <AreaChart data={data} color="#2563eb" showGrid />;
}

import { AreaChart } from "@/components/ui/area-chart";

export function AreaChartWithAxes() {
  return (
    <AreaChart
      data={data}
      showGrid
      showLabels
      color="#2563eb"
      height={220}
    />
  );
}

// See full source: components/ui/area-chart.tsx
// Install with: npx @aniui/cli add area-chart
// Dependencies: react-native-svg