Beautiful Charts & Graphs

1
2
3
4
5
6
7
8
9
10
11
12
13
14import { area, legend } from "@/lib/charts";

// One SVG per period, shown or hidden by the island tabs.
export function Chart({ days }: { days: 90 | 30 | 7 }) {
  return area({
    series: [
      { label: "Desktop", values: daily(days) },
      { label: "Mobile", values: daily(days) },
    ],
    curve: "natural",
    stacked: true,
    h: 300,
  });
}

1
2
3
4
5
6
7
8
9
10
11import { area } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "natural",
  });
}

1
2
3
4
5
6
7
8
9
10
11import { area } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "linear",
  });
}

1
2
3
4
5
6
7
8
9
10
11import { area } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "step",
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13import { area, legend } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] },
      { label: "Mobile", values: [80, 200, 120, 190, 130, 140] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "natural",
    stacked: true,
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13import { area, legend } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] },
      { label: "Mobile", values: [80, 200, 120, 190, 130, 140] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "natural",
    stacked: true,
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13import { area, legend } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] },
      { label: "Mobile", values: [80, 200, 120, 190, 130, 140] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "natural",
    expand: true,
  });
}

1
2
3
4
5
6
7
8
9
10
11
12import { area, legend } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] },
      { label: "Mobile", values: [80, 200, 120, 190, 130, 140] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    stacked: true,
  });
}

1
2
3
4
5
6
7
8
9
10
11
12import { area } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "natural",
    axes: false,
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15import { area, legend } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] },
      { label: "Mobile", values: [80, 200, 120, 190, 130, 140] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "natural",
    stacked: true,
    fill: "gradient",
    axes: true,
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13import { area } from "@/lib/charts";

export function Chart() {
  return area({
    series: [
      { label: "Desktop", values: [186, 305, 237, 273, 209, 264] }
    ],
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    curve: "natural",
    axes: true,
    dots: true,
  });
}