bubble-chart
✓Build BubbleChart components. Use for scatter plots with size encoding, showing relationships between three variables.
Installation
SKILL.md
BubbleChart displays data points as circles where position (x, y) and size encode three different variables. Great for showing relationships and clusters.
| data | T[] | required | Array of data objects | | categories | Record | required | Color mapping for categoryKey values | | categoryKey | keyof T | required | Data key for bubble coloring | | xAccessor | (d: T) => number | - | Function to get x-position | | yAccessor | (d: T) => number | - | Function to get y-position |
| sizeAccessor | (d: T) => number | - | Function to get bubble size | | sizeRange | [number, number] | [1, 20] | Min/max bubble radius in pixels | | opacity | number | - | Bubble opacity (0-1) | | height | number | required | Chart height in pixels | | xFormatter | (tick, i?, ticks?) => string | - | X-axis label formatter |
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/dennisadriaans/vue-chrts --skill bubble-chart- Source
- dennisadriaans/vue-chrts
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-02
- Updated
- 2026-02-18
Quick answers
What is bubble-chart?
Build BubbleChart components. Use for scatter plots with size encoding, showing relationships between three variables. Source: dennisadriaans/vue-chrts.
How do I install bubble-chart?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/dennisadriaans/vue-chrts --skill bubble-chart Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/dennisadriaans/vue-chrts
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-02