gantt-chart

Render project timelines as Gantt charts with configurable accessor functions.

427|25|Updated Mar 16, 2025
One-click install
npx skills add https://github.com/dennisadriaans/vue-chrts --skill gantt-chart
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gantt-chart
Source: https://github.com/dennisadriaans/vue-chrts/tree/main/.claude/skills/gantt-chart
Command: npx skills add https://github.com/dennisadriaans/vue-chrts --skill gantt-chart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GanttChart helps teams plan, track, and communicate project timelines by visualizing tasks as bars along a timeline.

Core Features & Use Cases

  • Timeline visualization: render tasks as horizontal bars with start time and duration.
  • Category-based coloring: differentiate task phases using color categories.
  • Scheduling and planning: map start dates to x positions and durations to bar lengths, enabling quick planning across multiple teams.

Quick Start

Define your dataset and three accessors: x (start), length (duration), and type (category). Provide a categories map for colors. Render the GanttChart with the required props and optional configuration such as height and showLabels.

Frequently Asked Questions about gantt-chart

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

FAQPage Schema
How do I visualize project timelines with task scheduling and duration phases?

To visualize project timelines, you render tasks as horizontal bars using a Gantt chart by defining three accessor functions for start time, duration, and category, plus a categories mapping for color differentiation.

What data do I need to render a Gantt chart for product roadmapping?

You need a dataset with task start times, durations, and categories. You must define three accessor functions—x, length, and type—and provide a categories map for colors to render the Gantt chart.

Can I customize the height and labels of a Gantt chart for resource scheduling?

Yes, you can customize the Gantt chart using optional configuration props including height, labelWidth, and showLabels to control the data-driven rendering layout and visual display.

Does this Gantt chart tool work for coordinating multiple teams and task phases?

Yes, Gantt chart visualization supports project management and resource scheduling scenarios where multiple teams coordinate. It differentiates task phases using category-based coloring for quick planning.

What is the best way to plan tasks across different durations in data visualization?

The best way to plan tasks across different durations is using a Gantt chart that maps start dates to x positions and durations to bar lengths, enabling quick planning and tracking across multiple teams.