# Bar Blocks

Self-contained WebGPU bar chart blocks you can copy and customize.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





## Monospace [#monospace]

<ComponentPreview title="Monospace bar chart" name="monospace-bar-chart">
  <MonospaceBarChart />
</ComponentPreview>

```bash
npx shadcn@latest add @chartcn/monospace-bar-chart
```

## Hover trace [#hover-trace]

<ComponentPreview title="Interactive hover trace" name="hover-trace-bar-chart">
  <HoverTraceBarChart />
</ComponentPreview>

```bash
npx shadcn@latest add @chartcn/hover-trace-bar-chart
```

Both blocks are deliberately self-contained. Install a block when you want its complete layout; install [Bar Chart](/docs/components/bar-chart/static) when you want to compose your own.