bubble-chart

Renders a three-variable dataset as a bubble chart with axis labels and legends.

427|25|Updated Mar 16, 2025
One-click install
npx skills add https://github.com/dennisadriaans/vue-chrts --skill bubble-chart
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bubble-chart
Source: https://github.com/dennisadriaans/vue-chrts/tree/main/.claude/skills/bubble-chart
Command: npx skills add https://github.com/dennisadriaans/vue-chrts --skill bubble-chart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

BubbleChart helps visualize three-variable data by encoding two axes and a size in bubble charts, enabling quick insight into relationships and clusters.

Core Features & Use Cases

  • Three-variable scatter plots: x-position, y-position, and bubble size for a third metric.
  • Category-based coloring via categoryKey and categories mapping for clear grouping.
  • Configurable axes labels, height, and grid/legend options for dashboards and analytics.

Quick Start

Use the BubbleChart component to visualize a dataset by supplying:

  • xAccessor, yAccessor, and sizeAccessor functions
  • categoryKey with a categories mapping
  • height and labels for x and y axes

Frequently Asked Questions about bubble-chart

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I visualize three-variable data in a Vue dashboard?

Visualize three-variable data using a bubble chart that maps xAccessor and yAccessor for coordinates and sizeAccessor for bubble size, enabling quick insight into relationships and clusters across product, finance, and marketing contexts.

How does category-based coloring work in a scatter plot?

Category-based coloring works by supplying a categoryKey alongside a categories mapping, which groups data points by color to reveal clear visual grouping across product, finance, and marketing contexts.

Can I customize axis labels and grid options for exploratory analytics?

Yes, you can configure axis labels, height, and optional grid and legend controls for exploratory analytics dashboards, ensuring the bubble chart fits your specific visualization requirements.

What's the best way to show clusters in three-variable data without external dependencies?

Use a Vue bubble chart with accessors to show clusters in three-variable data without external dependencies, encoding two axes and a third variable by bubble size to reveal relationships natively.

Do I need to provide my own accessors for bubble chart data visualization?

Yes, you need to provide xAccessor, yAccessor, and sizeAccessor functions to map your dataset fields to the bubble chart coordinates and bubble sizes for accurate three-variable data visualization.