gantt-chart_skill

Overview

This skill builds GanttChart (timeline) components for Vue 3 projects. It visualizes temporal data as horizontal bars, making project timelines, schedules, and resource allocation easy to read and interact with.

How this skill works

Provide an array of timeline items and three accessor functions: x (start position), length (duration), and type (category). The chart maps each item to a labeled row, draws bars scaled along an x-axis, and colors bars by category using a categories map. Optional props control size, labels, legend placement, and tooltips.

When to use it

• Visualizing project schedules and task timelines.
• Showing team or resource allocation across time.
• Displaying sprint plans or release roadmaps.
• Comparing phases (planning, development, testing) by duration.
• Creating interactive timelines with custom tooltips and legends.

Best practices

• Always supply the three required accessors: x, length, and type.
• Use consistent units for x and length (timestamps, days, or indices).
• Define a category entry for every type value returned by type().
• Convert durations into milliseconds when using date timestamps.
• Tune labelWidth, rowHeight, and lineWidth for readable labels and bars.

Example use cases

• Project plan: map tasks with start dates and durations to show overlaps and dependencies.
• Sprint timeline: convert sprint numbers to x positions and points to durations.
• Release pipeline: color bars by phase (planning, development, testing, deployment).
• Resource planning: show allocations per team member or role over time.
• Simple task list: render small schedules with compact rowHeight and labelWidth.