uix-uiChart
Chart card (bar, line, donut). 3 types.
- Sat: 32
- Sun: 41
- Mon: 28
- Tue: 52
- Wed: 47
- Thu: 61
- Fri: 38
import { Chart } from "@/components/ui/chart";
export default function Example() {
const data = [
{ label: "Sat", value: 32 }, { label: "Sun", value: 41 }, { label: "Mon", value: 28 }, { label: "Tue", value: 52 },
{ label: "Wed", value: 47 }, { label: "Thu", value: 61 }, { label: "Fri", value: 38 },
];
return (
<div style={{ width: 440, maxWidth: "100%" }}>
<Chart type="bar" data={data} title="Orders this week" value="299" delta="+18%" highlight={5} />
</div>
);
}
Installation
$ npx uix-ui@latest add chartThis copies the file into components/ui/chart.tsx in your project. npx shadcn@latest add @uix/chart works too.
Usage
import { Chart } from "@/components/ui/chart";
<div style={{ width: 440, maxWidth: "100%" }}>
<Chart type="bar" data={data} title="Orders this week" value="299" delta="+18%" highlight={5} />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | bar | line | donut | "bar" | |
data | ChartDatum[] | – | |
title | React.ReactNode | – | |
value | React.ReactNode | – | Headline figure, for example $48.2k. |
delta | React.ReactNode | – | Change next to the value, for example 12.5%. |
highlight | number | – | Bar chart: index of the highlighted bar (defaults to the tallest). |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx