// Data Display

Chart

Visualize data with beautiful charts.

// Rendering preview…

// Install

npx shadcn@latest add @dakik/chart

// Usage

1import { ChartContainer, ChartStyle, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
2
3<ChartContainer />

// Code

1"use client";
2
3import React from "react";
4import {
5  Legend,
6  type LegendPayload,
7  type LegendProps,
8  ResponsiveContainer,
9  Tooltip,
10  type TooltipContentProps,
11  type TooltipPayloadEntry,
12  type TooltipValueType,
13} from "recharts";
14import { cn } from "@/lib/utils";
15
16const THEMES = { dark: ".dark", light: "" } as const;
17
18export type ChartConfig = Record<
19  string,
20  (
21    | { color?: never; theme: Record<keyof typeof THEMES, string> }
22    | { color?: string; theme?: never }
23  ) & {
24    icon?: React.ComponentType;
25    label?: React.ReactNode;
26  }
27>;
28

// Dependencies

recharts