common-patterns_skill

Overview

This skill documents common patterns and best practices for using vue-chrts. It focuses on data shaping, formatter behavior, styling props, and performance tips so you can build reliable, readable charts in Vue 3. Use it to avoid common mistakes and speed up chart configuration.

How this skill works

The guide explains the categories object pattern that maps data keys to legend labels and colors, and it details how different formatter functions receive parameters (notably the x-axis formatter receives an index). It lists common props for axes, legends, tooltips, animation, and padding, and describes available enums for legend position, curve types, and orientation. It also covers responsive behavior, TypeScript generics, color palettes, and a debugging checklist.

When to use it

• When mapping raw data keys to display names and colors via the categories object
• When you need precise control over axis labels, tooltips, or legend visibility
• When configuring responsive charts that fill container width but need fixed height
• When optimizing performance for larger datasets or lazy-loading heavy assets
• When using TypeScript and you want type-safe formatter functions

Best practices

• Define a categories object with exact data keys to control legend labels and colors
• Remember x-axis formatters receive an index; use it to reference your data array
• Memoize formatter functions with computed() when they depend on reactive state
• Limit data points (<1000) and set duration: 0 to disable animations for large datasets
• Specify height on the chart container to ensure proper rendering and tooltips

Example use cases

• Multi-series line chart with categories mapping keys to a distinct color palette
• Bar chart switching orientation between vertical and horizontal based on screen layout
• Area chart using CurveType.MonotoneX for smooth trends and a currency yFormatter
• Responsive dashboard widget that fills container width with height: 300 and a compact legend
• Map visualization that lazy-loads TopoJSON only when the component mounts