# syncfusion-react-bullet-chart

Configures Syncfusion bullet charts for React applications. Suitable for visualizing KPIs, targets, and qualitative performance bands on compact dashboards.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 655 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-bullet-chart/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-bullet-chart

## What it does

This skill instructs coding agents on integrating `BulletChartComponent` into React layouts. The agent learns how to bind data sources, set up actual value bars, and render target markers like crosses or rectangles. It also shows how to divide background scales into performance zones using range directives.

The component defaults to horizontal layout and a height of 126px. Tooltips remain inactive by default until `BulletTooltip` is injected into the component services. The agent configures axis tick marks, currency formats, and responsive container sizing accordingly.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-bullet-chart/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-bullet-chart/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-bullet-chart/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-bullet-chart/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-bullet-chart
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-bullet-chart/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-bullet-chart
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-bullet-chart/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-bullet-chart/SKILL.md

## When to use it
- compare actual metrics against target values in compact React views
- define qualitative background bands for performance tracking
- format quantitative axis ticks with currency or percentage rules
- switch between horizontal and vertical chart layouts

## Example prompts
- Create a horizontal bullet chart comparing revenue targets with three background zones
- Add custom tooltips to my BulletChartComponent showing actual and target values
- Configure vertical KPI indicators with currency axis formatting and ticks

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 61 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md