bar-chart_skill

Overview

This skill builds BarChart components for Vue 3, optimized for categorical comparisons, grouped bars, stacked bars, and horizontal layouts. It wraps an easy-to-use API for defining categories, y-axis series, formatters, and layout controls so you can render clear, responsive bar visualizations quickly. Use it to compare discrete categories, show multi-series comparisons, or visualize composition with stacked bars.

How this skill works

The component accepts an array of data objects and a categories map that defines labels and colors for each data key. You must also provide a yAxis array listing which data keys to render as bars; this distinguishes BarChart from line/area charts. Configure orientation, stacking, paddings, formatters, and legend/tooltip visibility to control appearance and interaction.

When to use it

• Comparing discrete categories (sales by product, counts by segment).
• Side-by-side comparisons across multiple series (this year vs last year).
• Showing composition or parts-of-a-whole using stacked bars.
• Displaying horizontal bars for long category names or ranking lists.
• When you need custom axis label formatting or custom tooltips.

Best practices

• Always set yAxis to the exact data keys you want plotted; missing keys cause no bars.
• Use descriptive category names and distinct colors for readability.
• Choose stacked only when total composition is important; use grouped for direct comparisons.
• Tune barPadding (0-1) and groupPadding (pixels) to avoid overly thin or crowded bars.
• Provide xFormatter/yFormatter for human-friendly axis labels and units.

Example use cases

• Quarterly revenue vs costs with grouped bars and currency-formatted y-axis.
• Monthly market-share composition using stacked bars to show contribution per brand.
• Horizontal ranking of product sales with long product names and a larger height.
• Single-series bar chart for quick comparison when only one metric is needed.
• Year-over-year comparison with two series and increased groupPadding for clarity.