Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-bullet-chart — Claude Code skill

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a claude-code
Open on GitHub

What syncfusion-react-bullet-chart 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.

What it helps with

  • 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 for the agent

  • 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

How to install syncfusion-react-bullet-chart

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-bullet-chart/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-bullet-chart/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-bullet-chart

How to install syncfusion-react-bullet-chart in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-bullet-chart -a claude-code. Alternatively, place the file in ~/.claude/skills/syncfusion-react-bullet-chart/SKILL.md.

What does the syncfusion-react-bullet-chart skill do?

It provides patterns for setting up Syncfusion bullet charts in React. It helps the model handle data binding, actual and comparative bars, ranges, and accessibility.

Why are tooltips not displaying on the chart?

Tooltips are disabled out of the box. You must set tooltip.enable and register the BulletTooltip module inside the component services.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set61

syncfusion-react-breadcrumb A skill that walks your coding agent through building and configuring the Syncfusion Breadcrumb component in React: routes, icons, overflow. Useful when you need a navigation trail without digging through docs. CX Codex +1 658installs syncfusion-react-carousel This skill guides an agent through a Syncfusion React carousel with slides, controls, transitions, and accessibility. Use it for galleries, product displays, or slideshows. CX Codex +1 657installs syncfusion-react-sidebar Build responsive Syncfusion React sidebars for navigation layouts. Use this skill for drawer menus, nested navigation, and mobile-friendly panels. CX Codex +1 656installs syncfusion-react-timeline Tells your agent how to build event chronologies with the Syncfusion Timeline component for React. Useful for roadmaps, shipping tracking and activity feeds. CX Codex +1 655installs syncfusion-react-progress-bar Guides AI assistants in configuring Syncfusion React progress indicators. Useful when building file upload trackers, buffer meters, and task loaders. CX Codex +1 654installs syncfusion-react-splitter This skill helps build React layouts with resizable panes, collapse controls, nested splits, and resize event handling. CX Codex +1 653installs syncfusion-react-smithchart A skill that walks your agent through building and customizing Syncfusion's React Smith Chart for impedance and RF work. CX Codex +1 652installs syncfusion-react-circular-gauge Build React circular gauges for KPIs, sensor readings, speedometers, and live monitoring dashboards with this skill. CX Codex +1 651installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor