Chart
ChartGantt
Gantt chart with row labels, x-start/length accessors, and legend.
ChartGantt
Gantt chart for project and task timelines. Row labels, start positions, and durations are resolved via accessor functions. Forwards unknown attributes to the underlying primitive via v-bind="$attrs".
Components
<XAChartGantt />
Gantt chart for project/task timelines. Row labels, start positions, and durations are resolved via accessor functions.
<XAChartGantt
:data="tasksData"
:categories="{
design: { name: 'Design', color: '#6366f1' },
development: { name: 'Development', color: '#3b82f6' },
}"
:x-accessor="(d) => d.startWeek"
:length-accessor="(d) => d.durationWeeks"
:type-accessor="(d) => d.phase"
show-labels
:label-width="120"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | any[] | — | Required. Chart data array. |
categories | Record<string, { name: string; color: string }> | — | Required. Phase/category definitions. |
height | number | 300 | Chart height in px. |
xAccessor | (d: any) => number | — | Extracts the X start position. |
lengthAccessor | (d: any) => number | — | Extracts the bar duration/length. |
typeAccessor | (d: any) => string | — | Maps a row to a category key. |
showLabels | boolean | true | Show row label column. |
labelWidth | number | 100 | Width of the label column in px. |
hideLegend | boolean | false | Hide the legend. |
legendPosition | LegendPosition | LegendPosition.BottomCenter | Legend placement. |
AI Context
component: XAChartGantt
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Displaying project timelines, sprint schedules, or task durations as a Gantt chart
patterns:
- xAccessor returns the start position (e.g. week number or date offset).
- lengthAccessor returns the duration/bar length in the same unit as xAccessor.
- typeAccessor maps a row to a category key for color assignment.