skills.rest
dennisadriaans
dennisadriaansCOMMUNITY
Explore all skills by this author →
Website𝕏@DennisAdriaansGitHub

bar-chart

Configure grouped or stacked bar charts with axis customization in Vue 3 applications.

427|25|Updated Mar 16, 2025
Search Tags:#charts#vue#data-visualization#bar-chart#categorical-data#grouped#stacked
One-click install
npx skills add https://github.com/dennisadriaans/vue-chrts --skill bar-chart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bar-chart
Source: https://github.com/dennisadriaans/vue-chrts/tree/main/.claude/skills/bar-chart
Command: npx skills add https://github.com/dennisadriaans/vue-chrts --skill bar-chart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bar charts are the go-to way to compare discrete categories, but implementing a reusable, accessible BarChart in Vue can be verbose and error-prone. This Skill provides a ready-to-use BarChart component example that supports grouping, stacking, orientation, and category-based styling to streamline data visualization in dashboards and reports.

Core Features & Use Cases

  • Supports grouped and stacked bars to compare multiple series per category.
  • Horizontal and vertical orientations for flexible layouts.
  • Category-based styling with color mapping and axis customization.
  • Use Case: visualizing quarterly revenue by product line, or comparing planned vs actual across categories.

Quick Start

Install or import the BarChart component into your Vue app, provide a data array and a categories map, specify yAxis keys for the bars, and render the component with height and axis props to generate a chart quickly.

Frequently Asked Questions about bar-chart

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

FAQPage Schema
How do I create a stacked bar chart in Vue 3 for categorical data?▼

You can create grouped bar charts by importing the BarChart component into your Vue 3 application, supplying a data array with multiple yAxis keys, and mapping categories to visually compare discrete series side-by-side.

Can I render horizontal bar charts for comparing categories in Vue?▼

Yes, the BarChart component supports horizontal and vertical orientations, allowing you to flexibly layout categorical data comparisons within your Vue application dashboards and reports.

What data format is needed to visualize grouped bars in a Vue component?▼

Visualizing grouped bars requires a data array containing yAxis keys for your series and a categories map to configure the visual styling, ensuring accurate categorical data representation.

Do I need TypeScript to use a Vue 3 bar chart component?▼

Yes, TypeScript is required along with Vue 3 to use this BarChart component, which handles grouped and stacked bars, layout orientations, and axis customization for categorical data visualization.

What is the best way to customize axis styling for categorical data in Vue charts?▼

The best way to customize axis styling is using the BarChart component's built-in category-based color mapping and axis props, which streamline visual configuration for categorical data arrays.

Related Skills

Explore More Software Engineering Skills→
Snowflake-LabsSnowflake-Labs
12

read-ors-configuration

A concise summary of your roleplay character: name,</name> personality, and/or behavior, formatted as a single string sentence. Typically不超过50字，此处省略

Official
Intermediate
anthropicsanthropics
37

graphing

Create charts from tabular data with PNG, SVG, or interactive HTML output.

Official
Advanced
hoodinihoodini
262

analytics-metrics

Automate analytics dashboard creation with Recharts line, bar, and pie charts.

Community
Intermediate
aws-samplesaws-samples
186

visualization

Create interactive bar, line, and pie charts from structured data.

Official
Intermediate