简介
适用于 React 应用程序的现代美观 UI 组件。
Bklit UI 是一个基于 shadcn/ui 构建的组件库,旨在帮助您更轻松地构建图表和数据可视化。


用法
面积图使用了与折线图相同的可组合 API。有关交互式示例,请参阅图表画廊。
jsx
import { AreaChart, Area, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts";
const data = [
{ date: new Date("2025-01-01"), revenue: 12000, costs: 8500 },
{ date: new Date("2025-01-02"), revenue: 13500, costs: 9200 },
// ... more data
];
export default function RevenueChart() {
return (
<AreaChart data={data}>
<Grid horizontal />
<Area dataKey="revenue" fill="var(--chart-line-primary)" />
<Area dataKey="costs" fill="var(--chart-line-secondary)" />
<XAxis />
<ChartTooltip />
</AreaChart>
);
}