8-bit Chart Bar

1"use client";
2 
3import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
4 
5import {
6  type ChartConfig,
7  ChartContainer,
8  ChartTooltip,
9  ChartTooltipContent,
10} from "@/components/ui/8bit/chart";
11 
12export const description = "A multiple bar chart";
13 
14const chartData = [
15  { month: "January", desktop: 186, mobile: 80 },
16  { month: "February", desktop: 305, mobile: 200 },
17  { month: "March", desktop: 237, mobile: 120 },
18  { month: "April", desktop: 73, mobile: 190 },
19  { month: "May", desktop: 209, mobile: 130 },
20  { month: "June", desktop: 214, mobile: 140 },
21];
22 
23const chartConfig = {
24  desktop: {
25    label: "Desktop",
26    color: "var(--chart-1)",
27  },
28  mobile: {
29    label: "Mobile",
30    color: "var(--chart-2)",
31  },
32} satisfies ChartConfig;
33 
34export default function ChartBarMultiple() {
35  return (
36    <ChartContainer config={chartConfig}>
37      <BarChart data={chartData}>
38        <CartesianGrid vertical={false} />
39        <XAxis
40          dataKey="month"
41          tickLine={false}
42          tickMargin={10}
43          axisLine={false}
44          tickFormatter={(value) => value.slice(0, 3)}
45        />
46        <ChartTooltip
47          cursor={false}
48          content={<ChartTooltipContent indicator="dot" />}
49        />
50        <Bar dataKey="desktop" fill="var(--color-desktop)" />
51        <Bar dataKey="mobile" fill="var(--color-mobile)" />
52      </BarChart>
53    </ChartContainer>
54  );
55}