line-area-chart_skill

Overview

This skill builds LineChart and AreaChart components for Vue 3 applications to visualize time series, trends, and continuous data. It provides a shared API where LineChart is an AreaChart variant with the area fill hidden, enabling consistent configuration across both chart types. The components are designed for clear, configurable displays of multiple series with legends, tooltips, and axis formatting.

How this skill works

Provide an array of data objects and a categories map that defines each series (label and color). The chart renders lines and optional filled areas, supports stacking, custom gradients, and multiple curve interpolation types. Format axis labels and tooltips via provided formatter callbacks, and control ticks, grid lines, legends, and other visual options through props.

When to use it

• Displaying trends or patterns over time (daily, weekly, monthly data).
• Comparing multiple continuous series (desktop vs mobile, revenue vs cost).
• Showing cumulative or stacked contributions across categories.
• When you need configurable axis formatting and custom tooltips.

Best practices

• Always supply a categories map whose keys match the data object fields exactly.
• Use xFormatter to convert numeric tick indices into readable dates or labels.
• Choose CurveType.MonotoneX for smooth trend lines and Linear for discrete points.
• Limit the number of series shown to keep the legend and lines readable.
• Provide yFormatter for locale-aware numbers and tooltipTitleFormatter for custom tooltip headers.

Example use cases

• Daily visitors line chart with separate series for desktop and mobile.
• Stacked area chart showing product revenue contributions over a quarter.
• Smoothing noisy measurements with monotone curve interpolation.
• Small multiples of line charts with consistent height and tick counts.
• Area chart with custom gradient stops to emphasize recent values.