Chart

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
  chartConfig,
} from "smithers-orchestrator/ui/adapters/chart";

const config = chartConfig([
  { key: "landed", label: "Landed" },
  { key: "inflight", label: "In flight" },
]);

<ChartContainer config={config}>
  <BarChart data={rows}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="area" tickLine={false} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Bar dataKey="landed" fill="var(--color-landed)" radius={[4, 4, 0, 0]} maxBarSize={24} />
    <Bar dataKey="inflight" fill="var(--color-inflight)" radius={[4, 4, 0, 0]} maxBarSize={24} />
  </BarChart>
</ChartContainer>