bklit-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Bklit UI

Composable chart components for React, distributed via the

@bklit

shadcn registry. Charts are installed as source into the user's project.

IMPORTANT: Run shadcn CLI commands with the project's package runner:
npx shadcn@latest
,
pnpm dlx shadcn@latest
, or
bunx --bun shadcn@latest
.

适用于React的可组合图表组件，通过

@bklit

shadcn注册表分发。图表会作为源码安装到用户项目中。

重要提示： 使用项目的包运行器执行shadcn CLI命令：
npx shadcn@latest
、
pnpm dlx shadcn@latest
或
bunx --bun shadcn@latest
。

Current Project Context

当前项目上下文

json

!`npx shadcn@latest info --json`

Use the JSON above for framework, aliases, Tailwind version, installed components, and resolved paths. Confirm the

@bklit

registry is configured before adding charts.

json

!`npx shadcn@latest info --json`

使用上述JSON信息获取框架、别名、Tailwind版本、已安装组件及解析路径。在添加图表前，请确认已配置

@bklit

注册表。

Principles

原则

Install before inventing. Use
```
npx shadcn@latest add @bklit/<chart>
```
— charts are registry components, not hand-rolled SVG.
Compose, don't flatten. Root chart →
```
Grid
```
→ series → axes →
```
ChartTooltip
```
. See composition.md.
Theme with tokens. Use
```
chartCssVars
```
and
```
--chart-*
```
variables — never hardcode one-off colors. See theming.md.
Read the doc page first. Each chart has props, data shape, and examples at
```
https://ui.bklit.com/docs/components/<slug>
```
.

Browse variants. Gallery:

https://ui.bklit.com/charts/<slug>

— Studio:

https://ui.bklit.com/studio?chart=<slug>

优先安装，而非自行编写。使用
```
npx shadcn@latest add @bklit/<chart>
```
——图表是注册表组件，而非手动编写的SVG。
组合而非扁平化。根图表 →
```
Grid
```
→ 系列 → 坐标轴 →
```
ChartTooltip
```
。详见composition.md。
使用令牌进行主题配置。使用
```
chartCssVars
```
和
```
--chart-*
```
变量——绝不硬编码一次性颜色。详见theming.md。
先阅读文档页面。每个图表的属性、数据格式及示例均位于
```
https://ui.bklit.com/docs/components/<slug>
```
。

浏览变体。画廊：

https://ui.bklit.com/charts/<slug>

——工作室：

https://ui.bklit.com/studio?chart=<slug>

。

Critical Rules

核心规则

These rules are always enforced. Each links to Incorrect/Correct examples.

这些规则始终强制执行，每条规则均链接至错误/正确示例。

Composition → composition.md

组件组合 → composition.md

Series and axes live inside the root chart —
```
LineChart
```
,
```
BarChart
```
,
```
AreaChart
```
, etc.
One root per chart — use
```
ComposedChart
```
for mixed series types.
Grid before series so lines/bars render above grid lines.
ChartTooltip
as a chart child — required for crosshair and hover context.

系列与坐标轴需置于根图表内部——
```
LineChart
```
、
```
BarChart
```
、
```
AreaChart
```
等。
每个图表仅一个根组件——混合系列类型请使用
```
ComposedChart
```
。
Grid组件需在系列组件之前，确保线条/柱状图渲染在网格线上方。
ChartTooltip
作为图表子组件——为十字线和悬停上下文所必需。

Theming → theming.md

主题配置 → theming.md

Use
chartCssVars
from

@bklitui/ui/charts

instead of raw

"var(--chart-…)"

strings.

Series palette:
```
--chart-1
```
…
```
--chart-5
```
for multi-series charts.
Tooltip surfaces:
```
bg-popover text-popover-foreground
```
— avoids white-on-white in light mode.

使用
chartCssVars
——来自
```
@bklitui/ui/charts
```
，而非直接使用
```
"var(--chart-…)"
```
字符串。
系列调色板：
```
--chart-1
```
…
```
--chart-5
```
适用于多系列图表。
提示框背景： 使用
```
bg-popover text-popover-foreground
```
——避免浅色模式下白字白背景的问题。

Animation → animation.md

动画设置 → animation.md

Default duration ~1100ms for cartesian enter animations unless the doc specifies otherwise.
Replay: change
```
revealSignature
```
or remount with a new
```
key
```
.
Live charts: use
```
paused
```
on
```
LiveLineChart
```
to debug without stopping the rAF loop manually.

默认时长约1100ms——笛卡尔图入场动画，除非文档另有指定。
重播： 修改
```
revealSignature
```
或使用新的
```
key
```
重新挂载组件。
实时图表： 在
```
LiveLineChart
```
上使用
```
paused
```
属性，无需手动停止rAF循环即可调试。

Tooltips → tooltips.md

提示框 → tooltips.md

Custom content via
ChartTooltip

content
prop or children patterns from docs.
indicatorColor
function for candlestick / dynamic crosshair colors.
Custom indicators: use
```
useChart()
```
— do not track mouse globally outside chart context.

通过
ChartTooltip
的
content
属性自定义内容，或使用文档中的子组件模式。
indicatorColor
函数——用于K线图/动态十字线颜色。
自定义指示器： 使用
```
useChart()
```
——不要在图表上下文之外全局跟踪鼠标位置。

Installation → installation.md

安装指南 → installation.md

Require
@bklit
registry in
```
components.json
```
.
Install:
```
npx shadcn@latest add @bklit/<slug>
```
.
Let the CLI install peer dependencies — do not pin
```
@visx/*
```
/
```
motion
```
manually unless resolving a conflict.

要求
components.json
中配置
@bklit
注册表。
安装命令：
```
npx shadcn@latest add @bklit/<slug>
```
。
让CLI安装对等依赖——除非解决冲突，否则不要手动固定
```
@visx/*
```
/
```
motion
```
版本。

Chart Catalog

图表目录

Slug	Use when	Install	Docs	Gallery
`area-chart`	Trends with filled regions under lines	`@bklit/area-chart`	/docs/components/area-chart	/charts/area-chart
`bar-chart`	Category comparisons, stacked or grouped bars	`@bklit/bar-chart`	/docs/components/bar-chart	/charts/bar-chart
`line-chart`	Time series, multi-line trends, markers	`@bklit/line-chart`	/docs/components/line-chart	/charts/line-chart
`live-line-chart`	Streaming / real-time data	`@bklit/live-line-chart`	/docs/components/live-line-chart	/charts/live-line-chart
`composed-chart`	Mixed bar + line (or similar) on one axis	`@bklit/composed-chart`	/docs/components/composed-chart	/charts/composed-chart
`scatter-chart`	Correlation, distribution, bubble sizing	`@bklit/scatter-chart`	/docs/components/scatter-chart	/charts/scatter-chart
`candlestick-chart`	OHLC financial data, brushes	`@bklit/candlestick-chart`	/docs/components/candlestick-chart	/charts/candlestick-chart
`pie-chart`	Part-to-whole slices	`@bklit/pie-chart`	/docs/components/pie-chart	/charts/pie-chart
`ring-chart`	Donut / ring KPIs	`@bklit/ring-chart`	/docs/components/ring-chart	/charts/ring-chart
`radar-chart`	Multi-axis comparison	`@bklit/radar-chart`	/docs/components/radar-chart	/charts/radar-chart
`gauge-chart`	Single-value KPI dial	`@bklit/gauge-chart`	/docs/components/gauge-chart	/charts/gauge-chart
`funnel-chart`	Stage conversion funnels	`@bklit/funnel-chart`	/docs/components/funnel-chart	/charts/funnel-chart
`sankey-chart`	Flow between nodes	`@bklit/sankey-chart`	/docs/components/sankey-chart	/charts/sankey-chart
`choropleth-chart`	Geo regions colored by value	`@bklit/choropleth-chart`	/docs/components/choropleth-chart	/charts/choropleth-chart

标识	使用场景	安装包	文档	画廊
`area-chart`	带填充区域的趋势线	`@bklit/area-chart`	/docs/components/area-chart	/charts/area-chart
`bar-chart`	分类对比、堆叠或分组柱状图	`@bklit/bar-chart`	/docs/components/bar-chart	/charts/bar-chart
`line-chart`	时间序列、多线趋势、标记点	`@bklit/line-chart`	/docs/components/line-chart	/charts/line-chart
`live-line-chart`	流数据/实时数据	`@bklit/live-line-chart`	/docs/components/live-line-chart	/charts/live-line-chart
`composed-chart`	同一坐标轴上混合柱状+折线（或类似）图	`@bklit/composed-chart`	/docs/components/composed-chart	/charts/composed-chart
`scatter-chart`	相关性、分布、气泡大小	`@bklit/scatter-chart`	/docs/components/scatter-chart	/charts/scatter-chart
`candlestick-chart`	OHLC金融数据、画笔工具	`@bklit/candlestick-chart`	/docs/components/candlestick-chart	/charts/candlestick-chart
`pie-chart`	部分与整体占比切片	`@bklit/pie-chart`	/docs/components/pie-chart	/charts/pie-chart
`ring-chart`	环形KPI指标	`@bklit/ring-chart`	/docs/components/ring-chart	/charts/ring-chart
`radar-chart`	多轴对比	`@bklit/radar-chart`	/docs/components/radar-chart	/charts/radar-chart
`gauge-chart`	单值KPI仪表盘	`@bklit/gauge-chart`	/docs/components/gauge-chart	/charts/gauge-chart
`funnel-chart`	阶段转化漏斗	`@bklit/funnel-chart`	/docs/components/funnel-chart	/charts/funnel-chart
`sankey-chart`	节点间流向	`@bklit/sankey-chart`	/docs/components/sankey-chart	/charts/sankey-chart
`choropleth-chart`	按值着色的地理区域	`@bklit/choropleth-chart`	/docs/components/choropleth-chart	/charts/choropleth-chart

Workflow

工作流程

Run
```
npx shadcn@latest info --json
```
— verify
```
@bklit
```
registry and aliases.
Pick a chart from the catalog (or ask the user what story the data tells).
Open the doc URL for data shape and props.
If not installed:
```
npx shadcn@latest add @bklit/<slug>
```
.
Compose with grid, series, axes, tooltip — apply theming tokens.
Point the user to the gallery or Studio URL for variant inspiration.

运行
```
npx shadcn@latest info --json
```
——验证
```
@bklit
```
注册表及别名配置。
从目录中选择图表（或询问用户数据要呈现的故事）。
打开文档URL查看数据格式与属性。
若未安装：执行
```
npx shadcn@latest add @bklit/<slug>
```
。
组合Grid、系列、坐标轴、提示框组件——应用主题令牌。
引导用户查看画廊或工作室URL获取变体灵感。

Quick Reference

快速参考

bash

undefined

bash

undefined

Project info

项目信息

npx shadcn@latest info --json

Add a chart

添加图表

npx shadcn@latest add @bklit/line-chart

Search registries (if configured)

搜索注册表（已配置情况下）

npx shadcn@latest search @bklit


```tsx
import { LineChart, Line, Grid, XAxis, ChartTooltip, chartCssVars } from "@bklitui/ui/charts";

<LineChart data={data} xDataKey="date">
  <Grid horizontal />
  <Line dataKey="users" stroke={chartCssVars.linePrimary} />
  <XAxis />
  <ChartTooltip />
</LineChart>

npx shadcn@latest search @bklit


```tsx
import { LineChart, Line, Grid, XAxis, ChartTooltip, chartCssVars } from "@bklitui/ui/charts";

<LineChart data={data} xDataKey="date">
  <Grid horizontal />
  <Line dataKey="users" stroke={chartCssVars.linePrimary} />
  <XAxis />
  <ChartTooltip />
</LineChart>

Utility docs

工具文档

Theming: https://ui.bklit.com/docs/theming
Grid: https://ui.bklit.com/docs/utility/grid
Legend: https://ui.bklit.com/docs/utility/legend
Tooltip: https://ui.bklit.com/docs/utility/tooltip
Custom indicator: https://ui.bklit.com/docs/utility/custom-indicator
useChart: https://ui.bklit.com/docs/utility/use-chart

主题配置：https://ui.bklit.com/docs/theming
网格：https://ui.bklit.com/docs/utility/grid
图例：https://ui.bklit.com/docs/utility/legend
提示框：https://ui.bklit.com/docs/utility/tooltip
自定义指示器：https://ui.bklit.com/docs/utility/custom-indicator
useChart：https://ui.bklit.com/docs/utility/use-chart

Detailed References

详细参考

composition.md
theming.md
animation.md
tooltips.md
installation.md

composition.md
theming.md
animation.md
tooltips.md
installation.md