Installation

@import "tailwindcss";

/* Let Tailwind see the classes the charts use. The path is relative to this file. */
@source "../node_modules/bklit-tanstack-charts";

:root {
  --chart-1: var(--color-stone-700);
  --chart-2: var(--color-stone-500);
  --chart-3: var(--color-stone-400);
  --chart-4: var(--color-stone-300);
  --chart-5: var(--color-stone-100);
  --chart-background: oklch(0.915 0 0);
  --chart-foreground: oklch(0.474 0 285);
  --chart-foreground-muted: oklch(0.862 0 260);
  --chart-line-primary: var(--chart-1);
  --chart-line-secondary: var(--chart-2);
  --chart-crosshair: oklch(0.677 0 72.411);
  --chart-grid: oklch(0.917 0 0);
  --chart-brush-border: var(--chart-grid);
  --chart-tooltip-background: var(--popover);
  --chart-tooltip-foreground: var(--popover-foreground);
  --chart-tooltip-muted: var(--muted-foreground);
  --chart-indicator-color: oklch(0.21 0.006 285);
  --chart-indicator-secondary-color: oklch(0.913 0 0);
  --chart-marker-background: oklch(0.833 0 260);
  --chart-marker-border: oklch(0.85 0.01 260);
  --chart-marker-foreground: oklch(0.3 0.01 260);
  --chart-marker-badge-background: oklch(0 0 0);
  --chart-marker-badge-foreground: oklch(0.84 0 0);
  --chart-segment-background: oklch(0.756 0 0 / 0.06);
  --chart-segment-line: oklch(0.5 0 0 / 0.25);
  --chart-label: oklch(0.45 0.01 260);
  --legend: oklch(1 0 0);
  --legend-foreground: oklch(0.141 0.005 285.823);
  --legend-muted: oklch(0.967 0.001 286.375);
  --legend-muted-foreground: oklch(0.552 0.016 285.938);
  --legend-track: oklch(0.92 0.004 286.32);
  --chart-scale-01: var(--color-stone-50);
  --chart-scale-02: var(--color-stone-200);
  --chart-scale-03: var(--color-stone-300);
  --chart-scale-04: var(--color-stone-400);
  --chart-scale-05: var(--color-stone-500);
  --chart-scale-pattern-color: var(--color-stone-100);
}

.dark {
  --chart-1: var(--color-zinc-200);
  --chart-2: var(--color-zinc-400);
  --chart-3: var(--color-zinc-500);
  --chart-4: var(--color-zinc-600);
  --chart-5: var(--color-zinc-700);
  --chart-background: oklch(0.145 0 0);
  --chart-foreground: oklch(0.45 0 0);
  --chart-foreground-muted: oklch(0.65 0.01 260);
  --chart-crosshair: oklch(0.72 0.0158 281.84);
  --chart-grid: oklch(0.6 0.0124 243.77 / 0.25);
  --chart-brush-border: var(--chart-grid);
  --chart-indicator-color: oklch(1 0 0);
  --chart-indicator-secondary-color: oklch(0.145 0 0);
  --chart-marker-background: oklch(0.25 0.01 260);
  --chart-marker-border: oklch(0.4 0.01 260);
  --chart-marker-foreground: oklch(0.9 0 0);
  --chart-marker-badge-background: oklch(1 0 0);
  --chart-marker-badge-foreground: oklch(0.15 0 0);
  --chart-segment-background: oklch(0.41 0.0127 248.14 / 0.25);
  --chart-segment-line: oklch(1 0 0 / 0.25);
  --chart-tooltip-background: var(--popover);
  --chart-tooltip-foreground: var(--popover-foreground);
  --chart-tooltip-muted: var(--muted-foreground);
  --chart-label: oklch(0.75 0.01 260);
  --legend: oklch(0.21 0.006 285.885);
  --legend-foreground: oklch(0.985 0 0);
  --legend-muted: oklch(0.274 0.006 286.033);
  --legend-muted-foreground: oklch(0.705 0.015 286.067);
  --legend-track: oklch(0.274 0.006 286.033);
  --chart-scale-01: var(--color-zinc-900);
  --chart-scale-02: var(--color-zinc-700);
  --chart-scale-03: var(--color-zinc-500);
  --chart-scale-04: var(--color-zinc-300);
  --chart-scale-05: var(--color-zinc-200);
  --chart-scale-pattern-color: var(--background);
}

import { Area, AreaChart, ChartTooltip, Grid, XAxis } from "bklit-tanstack-charts";

const data = [
  { date: new Date("2025-01-01"), revenue: 12000, costs: 8500 },
  { date: new Date("2025-01-02"), revenue: 13500, costs: 9200 },
  { date: new Date("2025-01-03"), revenue: 11000, costs: 7800 },
  { date: new Date("2025-01-04"), revenue: 14500, costs: 10100 },
  { date: new Date("2025-01-05"), revenue: 13800, costs: 9400 },
  // ...
];

export function RevenueChart() {
  return (
    <AreaChart data={data}>
      <Grid horizontal />
      <Area dataKey="revenue" />
      <XAxis />
      <ChartTooltip />
    </AreaChart>
  );
}