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.