sy-gantt-chart
Gantt
Arrange task durations and progress on a timeline.
sy-gantt-chart
Manage project schedules, milestones, and baselines together.
This display example does not save tasks. Connect application persistence to editing events to save changes.
Base chart tier: Pro. Features such as additional renderers and custom branding have separate entitlement requirements.
| Input | Data description |
|---|---|
data | An array of tasks as { id, label, start, end?, progress?, milestone?, baseline? }. progress ranges from 0 to 1. |
- Run in Components
Change options and view framework-specific code
- Shared installation and integration
Complete implementation example
<div id="chart-container" style="width: 100%; min-width: 0;"></div>
<script type="module">
import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-gantt-chart.js';
define0();
// Pro: complete registerLicense at app startup using your issued certificate.
// The website preview certificate is not for use in customer apps.
const specs = [
{
"id": "example-chart",
"tag": "sy-gantt-chart",
"props": {
"data": [
{
"id": "research",
"label": "Research",
"start": "2026-01-05",
"end": "2026-01-09",
"progress": 1,
"color": "#8263d9"
},
{
"id": "design",
"label": "Design",
"start": "2026-01-08",
"end": "2026-01-16",
"progress": 0.65,
"color": "#239c91"
},
{
"id": "build",
"label": "Implementation",
"start": "2026-01-14",
"end": "2026-01-26",
"progress": 0.3,
"color": "#e99954"
},
{
"id": "launch",
"label": "Release",
"start": "2026-01-28",
"milestone": true
}
],
"width": 640,
"height": 360,
"brandPosition": "bottom-right",
"brandLogo": ""
}
}
];
const container = document.querySelector('#chart-container');
const elements = specs.map(({ tag, id, props }) => {
const element = document.createElement(tag);
element.id = id;
Object.assign(element, props);
element.setAttribute('aria-label', 'gantt example chart');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('taskClick', event.detail);
};
chart.addEventListener('taskClick', onEvent);
const observer = new ResizeObserver(([entry]) => {
const width = Math.max(160, Math.floor(entry.contentRect.width));
elements.forEach(element => { element.width = width; });
});
observer.observe(container);
// In an SPA, call this function when the view is disposed.
function disposeChart() {
observer.disconnect();
chart.removeEventListener('taskClick', onEvent);
container.replaceChildren();
}
</script>Properties
data
An array of tasks as { id, label, start, end?, progress?, milestone?, baseline? }. progress ranges from 0 to 1.
| Item | Value |
|---|---|
| JavaScript property | data |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GanttData |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttData
Type definition
width
Chart width in pixels. If the container width changes, update width from a ResizeObserver.
| Item | Value |
|---|---|
| JavaScript property | width |
| HTML attribute | width |
| Type | number |
| Default | 900 |
height
Chart height in pixels. Allow space for axes, titles, and the legend.
| Item | Value |
|---|---|
| JavaScript property | height |
| HTML attribute | height |
| Type | number |
| Default | 400 |
brandLogo
The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.
| Item | Value |
|---|---|
| JavaScript property | brandLogo |
| HTML attribute | brand-logo |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
brandPosition
The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.
| Item | Value |
|---|---|
| JavaScript property | brandPosition |
| HTML attribute | brand-position |
| Type | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' |
| Default | 'bottom-right' |
| Allowed values | top-left, top-right, bottom-left, bottom-right |
barHeight
Maximum task bar height and gap in CSS pixels.
| Item | Value |
|---|---|
| JavaScript property | barHeight |
| HTML attribute | bar-height |
| Type | number |
| Default | 24 |
rowGap
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | rowGap |
| HTML attribute | row-gap |
| Type | number |
| Default | 4 |
barRadius
Set as an HTML attribute or JavaScript property. type: number.
| Item | Value |
|---|---|
| JavaScript property | barRadius |
| HTML attribute | bar-radius |
| Type | number |
| Default | 3 |
progressShow
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | progressShow |
| HTML attribute | progress-show |
| Type | boolean |
| Default | true |
progressColor
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | progressColor |
| HTML attribute | progress-color |
| Type | string |
| Default | 'auto' |
taskLabelFormat
Pass as a JavaScript property. type: (task:GanttTask)=>string.
| Item | Value |
|---|---|
| JavaScript property | taskLabelFormat |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | (task:GanttTask)=>string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttTask
Type definition
timeDomain
Optional full timeline extent in epoch milliseconds.
| Item | Value |
|---|---|
| JavaScript property | timeDomain |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | readonly [number, number] |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
criticalPath
Pass as a JavaScript property. type: GanttCriticalPathInput.
| Item | Value |
|---|---|
| JavaScript property | criticalPath |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GanttCriticalPathInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttCriticalPathInput
Type definition
taskEditing
Opt-in task move/resize. Committed local edits are queried through getTasks/getTaskEdits; source updates supersede them.
| Item | Value |
|---|---|
| JavaScript property | taskEditing |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GanttTaskEditingInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttTaskEditingInput
Type definition
baseline
Reference-date strips, visible by default when tasks include baseline dates.
| Item | Value |
|---|---|
| JavaScript property | baseline |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GanttBaselineStyleInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttBaselineStyleInput
Type definition
dependencies
Pass as a JavaScript property. type: ReadonlyArray<GanttDependencyInput>.
| Item | Value |
|---|---|
| JavaScript property | dependencies |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | ReadonlyArray<GanttDependencyInput> |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttDependencyInput
Type definition
dependencyStyle
Pass as a JavaScript property. type: GanttDependencyStyleInput.
| Item | Value |
|---|---|
| JavaScript property | dependencyStyle |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GanttDependencyStyleInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttDependencyStyleInput
Type definition
timeAxis
Pass as a JavaScript property. type: GanttTimeAxisInput.
| Item | Value |
|---|---|
| JavaScript property | timeAxis |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GanttTimeAxisInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttTimeAxisInput
Type definition
crosshair
Pass as a JavaScript property. type: CartesianCrosshairInput.
| Item | Value |
|---|---|
| JavaScript property | crosshair |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianCrosshairInput |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianCrosshairInput
Type definition
crosshairTimeUnit
Crosshair time badge precision; hour by default. Uses timeAxis.utc without changing event timestamps.
| Item | Value |
|---|---|
| JavaScript property | crosshairTimeUnit |
| HTML attribute | crosshair-time-unit |
| Type | GanttCrosshairTimeUnit |
| Default | 'hour' |
| Allowed values | year, month, week, day, hour, minute, second |
- GanttCrosshairTimeUnit
Type definition
color
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | color |
| HTML attribute | color |
| Type | string |
| Default | 'auto' |
activeColor
Set as an HTML attribute or JavaScript property. type: string.
| Item | Value |
|---|---|
| JavaScript property | activeColor |
| HTML attribute | active-color |
| Type | string |
| Default | '#f59e0b' |
taskLabels
Allowed values: auto, show, hide. Default: 'auto'.
| Item | Value |
|---|---|
| JavaScript property | taskLabels |
| HTML attribute | task-labels |
| Type | GanttLabelMode |
| Default | 'auto' |
| Allowed values | auto, show, hide |
- GanttLabelMode
Type definition
chartTitle
The title inside the chart. Explain the data's unit and meaning alongside it.
| Item | Value |
|---|---|
| JavaScript property | chartTitle |
| HTML attribute | chart-title |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
chartSubtitle
The subtitle inside the chart.
| Item | Value |
|---|---|
| JavaScript property | chartSubtitle |
| HTML attribute | chart-subtitle |
| Type | string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
enableMouseTracking
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | enableMouseTracking |
| HTML attribute | enable-mouse-tracking |
| Type | boolean |
| Default | true |
tooltip
Tooltip settings for pointer-driven values, position, and content.
| Item | Value |
|---|---|
| JavaScript property | tooltip |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianTooltipInput |
| Default | undefined |
| Literals in the type | auto, off |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianTooltipInput
Type definition
tooltipEnabled
Set as an HTML attribute or JavaScript property. type: boolean.
| Item | Value |
|---|---|
| JavaScript property | tooltipEnabled |
| HTML attribute | tooltip-show |
| Type | boolean |
| Default | true |
tooltipFormat
Pass as a JavaScript property. type: (detail: GanttHitDetail) => string.
| Item | Value |
|---|---|
| JavaScript property | tooltipFormat |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | (detail: GanttHitDetail) => string |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttHitDetail
Type definition
animated
Whether to animate initial display and data changes.
| Item | Value |
|---|---|
| JavaScript property | animated |
| HTML attribute | animate |
| Type | boolean |
| Default | false |
animationDuration
Animation duration in milliseconds.
| Item | Value |
|---|---|
| JavaScript property | animationDuration |
| HTML attribute | animation-duration |
| Type | number |
| Default | 600 |
animationEasing
Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
| Item | Value |
|---|---|
| JavaScript property | animationEasing |
| HTML attribute | animation-easing |
| Type | GanttEasing |
| Default | 'ease-out' |
| Allowed values | linear, ease-out, ease-in, ease-in-out |
- GanttEasing
Type definition
animationType
Allowed values: initial, update. Default: undefined.
| Item | Value |
|---|---|
| JavaScript property | animationType |
| HTML attribute | animation-type |
| Type | GanttAnimationType |
| Default | undefined |
| Allowed values | initial, update |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttAnimationType
Type definition
streamSource
A stream source for live data. Check the contract for the specific type.
| Item | Value |
|---|---|
| JavaScript property | streamSource |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | GanttStreamSource |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- GanttStreamSource
Type definition
streamMax
The maximum number of streaming data points to retain.
| Item | Value |
|---|---|
| JavaScript property | streamMax |
| HTML attribute | stream-max |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
streamWindow
The streaming data range to keep visible.
| Item | Value |
|---|---|
| JavaScript property | streamWindow |
| HTML attribute | stream-window |
| Type | number |
| Default | undefined |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
zoom
Settings for zooming and the visible range.
| Item | Value |
|---|---|
| JavaScript property | zoom |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | CartesianZoomInput |
| Default | undefined |
| Literals in the type | auto, off, true, false, x, y, xy, inside |
undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.
- CartesianZoomInput
Type definition
engine
Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
| Item | Value |
|---|---|
| JavaScript property | engine |
| HTML attribute | engine |
| Type | GanttEngineMode |
| Default | 'auto' |
| Allowed values | auto, standard, pro |
- GanttEngineMode
Type definition
Events
rendered
Emits rendering results in detail when chart drawing completes.
Event name: rendered. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttRenderResult & { tier: GanttEngineTier }>.
chart.addEventListener('rendered', event => {
console.log(event.detail); // GanttRenderResult & { tier: GanttEngineTier }
});- GanttRenderResult
Type definition
- GanttEngineTier
Type definition
dependencyClick
CustomEvent.detail type: GanttDependencyHitDetail. Event names are case-sensitive.
Event name: dependencyClick. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttDependencyHitDetail>.
chart.addEventListener('dependencyClick', event => {
console.log(event.detail); // GanttDependencyHitDetail
});- GanttDependencyHitDetail
Type definition
dependencyHover
CustomEvent.detail type: GanttDependencyHitDetail | null. Event names are case-sensitive.
Event name: dependencyHover. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttDependencyHitDetail | null>.
chart.addEventListener('dependencyHover', event => {
console.log(event.detail); // GanttDependencyHitDetail | null
});- GanttDependencyHitDetail
Type definition
dependencySelectionChange
CustomEvent.detail type: GanttDependencySelectionChange. Event names are case-sensitive.
Event name: dependencySelectionChange. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttDependencySelectionChange>.
chart.addEventListener('dependencySelectionChange', event => {
console.log(event.detail); // GanttDependencySelectionChange
});- GanttDependencySelectionChange
Type definition
taskClick
CustomEvent.detail type: GanttHitDetail. Event names are case-sensitive.
Event name: taskClick. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttHitDetail>.
chart.addEventListener('taskClick', event => {
console.log(event.detail); // GanttHitDetail
});- GanttHitDetail
Type definition
taskHover
CustomEvent.detail type: GanttHitDetail | null. Event names are case-sensitive.
Event name: taskHover. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttHitDetail | null>.
chart.addEventListener('taskHover', event => {
console.log(event.detail); // GanttHitDetail | null
});- GanttHitDetail
Type definition
taskEditStart
CustomEvent.detail type: GanttTaskEditEventDetail. Event names are case-sensitive.
Event name: taskEditStart. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttTaskEditEventDetail>.
chart.addEventListener('taskEditStart', event => {
console.log(event.detail); // GanttTaskEditEventDetail
});- GanttTaskEditEventDetail
Type definition
taskEditMove
CustomEvent.detail type: GanttTaskEditEventDetail. Event names are case-sensitive.
Event name: taskEditMove. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttTaskEditEventDetail>.
chart.addEventListener('taskEditMove', event => {
console.log(event.detail); // GanttTaskEditEventDetail
});- GanttTaskEditEventDetail
Type definition
taskEditEnd
Cancelable before local dates, completion and row order commit. preventDefault restores the prior state.
Event name: taskEditEnd. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttTaskEditEventDetail>.
chart.addEventListener('taskEditEnd', event => {
console.log(event.detail); // GanttTaskEditEventDetail
});- GanttTaskEditEventDetail
Type definition
taskEditCancel
CustomEvent.detail type: GanttTaskEditEventDetail. Event names are case-sensitive.
Event name: taskEditCancel. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttTaskEditEventDetail>.
chart.addEventListener('taskEditCancel', event => {
console.log(event.detail); // GanttTaskEditEventDetail
});- GanttTaskEditEventDetail
Type definition
selectionChanged
CustomEvent.detail type: GanttSelectionChangeEventDetail. Event names are case-sensitive.
Event name: selectionChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<GanttSelectionChangeEventDetail>.
chart.addEventListener('selectionChanged', event => {
console.log(event.detail); // GanttSelectionChangeEventDetail
});- GanttSelectionChangeEventDetail
Type definition
pointContextMenu
CustomEvent.detail type: ChartPointContextMenuEventDetail<GanttHitDetail>. Event names are case-sensitive.
Event name: pointContextMenu. Names are case-sensitive. Read the payload from detail on CustomEvent<ChartPointContextMenuEventDetail<GanttHitDetail>>.
chart.addEventListener('pointContextMenu', event => {
console.log(event.detail); // ChartPointContextMenuEventDetail<GanttHitDetail>
});- ChartPointContextMenuEventDetail
Type definition
- GanttHitDetail
Type definition
appended
CustomEvent.detail type: { count: number; replaced: number }. Event names are case-sensitive.
Event name: appended. Names are case-sensitive. Read the payload from detail on CustomEvent<{ count: number; replaced: number }>.
chart.addEventListener('appended', event => {
console.log(event.detail); // { count: number; replaced: number }
});windowSlid
CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.
Event name: windowSlid. Names are case-sensitive. Read the payload from detail on CustomEvent<{ dropped: number }>.
chart.addEventListener('windowSlid', event => {
console.log(event.detail); // { dropped: number }
});tooltipShow
Whether to display the built-in tooltip.
Event name: tooltipShow. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianTooltipEventDetail>.
chart.addEventListener('tooltipShow', event => {
console.log(event.detail); // CartesianTooltipEventDetail
});- CartesianTooltipEventDetail
Type definition
tooltipHide
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: tooltipHide. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('tooltipHide', event => {
console.log(event.detail); // void
});tooltipAction
CustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.
Event name: tooltipAction. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianTooltipActionEventDetail>.
chart.addEventListener('tooltipAction', event => {
console.log(event.detail); // CartesianTooltipActionEventDetail
});- CartesianTooltipActionEventDetail
Type definition
chartAnimationStart
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationStart. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationStart', event => {
console.log(event.detail); // void
});chartAnimationEnd
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationEnd. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationEnd', event => {
console.log(event.detail); // void
});chartAnimationInterrupted
CustomEvent.detail type: void. Event names are case-sensitive.
Event name: chartAnimationInterrupted. Names are case-sensitive. Read the payload from detail on CustomEvent<void>.
chart.addEventListener('chartAnimationInterrupted', event => {
console.log(event.detail); // void
});zoomChange
CustomEvent.detail type: CartesianZoomChangeEventDetail. Event names are case-sensitive.
Event name: zoomChange. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianZoomChangeEventDetail>.
chart.addEventListener('zoomChange', event => {
console.log(event.detail); // CartesianZoomChangeEventDetail
});- CartesianZoomChangeEventDetail
Type definition
crosshairMove
CustomEvent.detail type: CartesianCrosshairEventDetail | null. Event names are case-sensitive.
Event name: crosshairMove. Names are case-sensitive. Read the payload from detail on CustomEvent<CartesianCrosshairEventDetail | null>.
chart.addEventListener('crosshairMove', event => {
console.log(event.detail); // CartesianCrosshairEventDetail | null
});- CartesianCrosshairEventDetail
Type definition
Methods
getCriticalPath
An asynchronous method. Check the argument and return types below.
getCriticalPath(): Promise<GanttCriticalPathResult>Return type: Promise<GanttCriticalPathResult>. Call the method after element registration and await its Promise result.
- GanttCriticalPathResult
Type definition
getDependencies
An asynchronous method. Check the argument and return types below.
getDependencies(): Promise<GanttDependencyDataset>Return type: Promise<GanttDependencyDataset>. Call the method after element registration and await its Promise result.
- GanttDependencyDataset
Type definition
getDependencyPaths
An asynchronous method. Check the argument and return types below.
getDependencyPaths(): Promise<GanttDependencyPath[]>Return type: Promise<GanttDependencyPath[]>. Call the method after element registration and await its Promise result.
- GanttDependencyPath
Type definition
hitTestDependency
An asynchronous method. Check the argument and return types below.
hitTestDependency(cssX: number, cssY: number): Promise<GanttDependencyHitDetail|null>| Arguments | Type | Required |
|---|---|---|
cssX | number | Required |
cssY | number | Required |
Return type: Promise<GanttDependencyHitDetail|null>. Call the method after element registration and await its Promise result.
- GanttDependencyHitDetail
Type definition
getDependencySelection
An asynchronous method. Check the argument and return types below.
getDependencySelection(): Promise<GanttDependencySelection>Return type: Promise<GanttDependencySelection>. Call the method after element registration and await its Promise result.
- GanttDependencySelection
Type definition
selectDependencyAt
An asynchronous method. Check the argument and return types below.
selectDependencyAt(index: number): Promise<GanttDependencyHitDetail|null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<GanttDependencyHitDetail|null>. Call the method after element registration and await its Promise result.
- GanttDependencyHitDetail
Type definition
showDependencyTooltipAtIndex
An asynchronous method. Check the argument and return types below.
showDependencyTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail|null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<CartesianTooltipEventDetail|null>. Call the method after element registration and await its Promise result.
- CartesianTooltipEventDetail
Type definition
redraw
Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.
redraw(): Promise<GanttRenderResult>Return type: Promise<GanttRenderResult>. Call the method after element registration and await its Promise result.
- GanttRenderResult
Type definition
getEngineStatus
Requested engine vs what runs, and why (CHART-ADD-08); a frozen or unlicensed chart reports the license outcome.
getEngineStatus(): Promise<ChartEngineStatus>Return type: Promise<ChartEngineStatus>. Call the method after element registration and await its Promise result.
- ChartEngineStatus
Type definition
getActiveTier
An asynchronous method. Check the argument and return types below.
getActiveTier(): Promise<GanttEngineTier>Return type: Promise<GanttEngineTier>. Call the method after element registration and await its Promise result.
- GanttEngineTier
Type definition
setData
Replace the bar set.
setData(data: GanttData): Promise<void>| Arguments | Type | Required |
|---|---|---|
data | GanttData | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GanttData
Type definition
getTasks
An asynchronous method. Check the argument and return types below.
getTasks(): Promise<GanttTask[]>Return type: Promise<GanttTask[]>. Call the method after element registration and await its Promise result.
- GanttTask
Type definition
getTask
An asynchronous method. Check the argument and return types below.
getTask(index: number): Promise<GanttTask | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<GanttTask | null>. Call the method after element registration and await its Promise result.
- GanttTask
Type definition
getTaskById
An asynchronous method. Check the argument and return types below.
getTaskById(id: string): Promise<GanttTask | null>| Arguments | Type | Required |
|---|---|---|
id | string | Required |
Return type: Promise<GanttTask | null>. Call the method after element registration and await its Promise result.
- GanttTask
Type definition
getDiagnostics
Normalization diagnostics for the effective base and stream source.
getDiagnostics(): Promise<GanttDiagnostics>Return type: Promise<GanttDiagnostics>. Call the method after element registration and await its Promise result.
- GanttDiagnostics
Type definition
getTaskCount
An asynchronous method. Check the argument and return types below.
getTaskCount(): Promise<number>Return type: Promise<number>. Call the method after element registration and await its Promise result.
getExtent
An asynchronous method. Check the argument and return types below.
getExtent(): Promise<GanttExtent>Return type: Promise<GanttExtent>. Call the method after element registration and await its Promise result.
- GanttExtent
Type definition
getLayout
Host-local geometry as shown. Scale fields preserve ellipses under non-uniform viewport zoom.
getLayout(): Promise<GanttLayoutResult>Return type: Promise<GanttLayoutResult>. Call the method after element registration and await its Promise result.
- GanttLayoutResult
Type definition
getBaselines
Reference comparisons for every accepted task, including hidden/offscreen baselines. Positive variance means later or longer.
getBaselines(): Promise<GanttBaselineComparison[]>Return type: Promise<GanttBaselineComparison[]>. Call the method after element registration and await its Promise result.
- GanttBaselineComparison
Type definition
appendPoint
Append one value to the stream. Check the argument type and the licensing requirements for streaming.
appendPoint(task: GanttTaskInput): Promise<void>| Arguments | Type | Required |
|---|---|---|
task | GanttTaskInput | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GanttTaskInput
Type definition
appendBatch
Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.
appendBatch(tasks: ReadonlyArray<GanttTaskInput>): Promise<void>| Arguments | Type | Required |
|---|---|---|
tasks | ReadonlyArray<GanttTaskInput> | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GanttTaskInput
Type definition
shift
Drop the oldest streamed categories (the data boxes are not the stream).
shift(count: number): Promise<void>| Arguments | Type | Required |
|---|---|---|
count | number | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
replace
Swap the streamed set (replace([]) clears it); the base values never leave. Without chart.streaming the dies upsert into the base like a batch (quietly: no appended, no binChanged, as a ring replace).
replace(tasks: ReadonlyArray<GanttTaskInput>): Promise<void>| Arguments | Type | Required |
|---|---|---|
tasks | ReadonlyArray<GanttTaskInput> | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GanttTaskInput
Type definition
getStreamSource
The stream session's source (Chart Pro): like the stream methods it waits for a license still being confirmed.
getStreamSource(): Promise<GanttStreamSource | undefined>Return type: Promise<GanttStreamSource | undefined>. Call the method after element registration and await its Promise result.
- GanttStreamSource
Type definition
pauseAnimation
Pause the current animation.
pauseAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
resumeAnimation
Resume a paused animation.
resumeAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
replayAnimation
Replay the initial sweep from min → value(s). No-op when animation is off / reduced.
replayAnimation(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
setAnimation
An asynchronous method. Check the argument and return types below.
setAnimation(options: { enabled?: boolean; duration?: number; easing?: GanttEasing; type?: GanttAnimationType }): Promise<void>| Arguments | Type | Required |
|---|---|---|
options | { enabled?: boolean; duration?: number; easing?: GanttEasing; type?: GanttAnimationType } | Required |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
- GanttEasing
Type definition
- GanttAnimationType
Type definition
hitTest
The box under a host-local CSS point (the nearest slot, within half a pitch), or null.
hitTest(cssX: number, cssY: number): Promise<GanttHitDetail | null>| Arguments | Type | Required |
|---|---|---|
cssX | number | Required |
cssY | number | Required |
Return type: Promise<GanttHitDetail | null>. Call the method after element registration and await its Promise result.
- GanttHitDetail
Type definition
selectTaskAt
An asynchronous method. Check the argument and return types below.
selectTaskAt(index: number): Promise<GanttHitDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<GanttHitDetail | null>. Call the method after element registration and await its Promise result.
- GanttHitDetail
Type definition
clearSelection
Release the selection (emits selectionChanged when there was one).
clearSelection(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getSelection
The selection: the selected node's / link's detail (null = none); its anchors are Pro-derived, refused without a valid license.
getSelection(): Promise<GanttSelection>Return type: Promise<GanttSelection>. Call the method after element registration and await its Promise result.
- GanttSelection
Type definition
showTooltipAtIndex
open the tooltip on a box (the facade's showTooltipAtPoint routes here); null off the boxes or with the tooltip off.
showTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<CartesianTooltipEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianTooltipEventDetail
Type definition
showTooltipAtPoint
Open the tooltip for a dot programmatically. pointIndex is the category (row) index; the optional seriesIndex selects a group within that row (defaults to the first visible group's dot in the row). Returns the emitted tooltip detail, or null when no dot resolves / the tooltip is disabled.
showTooltipAtPoint(index: number): Promise<CartesianTooltipEventDetail | null>| Arguments | Type | Required |
|---|---|---|
index | number | Required |
Return type: Promise<CartesianTooltipEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianTooltipEventDetail
Type definition
hideTooltip
Close the currently visible tooltip.
hideTooltip(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.
getTaskEdits
Committed local dates, completion and displaced rows; never mutates caller data.
getTaskEdits(): Promise<GanttTaskEdit[]>Return type: Promise<GanttTaskEdit[]>. Call the method after element registration and await its Promise result.
- GanttTaskEdit
Type definition
resetTaskEdits
An asynchronous method. Check the argument and return types below.
resetTaskEdits(id?: string): Promise<void>| Arguments | Type | Required |
|---|---|---|
id | string | Optional |
Return type: Promise<void>. Call the method after element registration and await its Promise result.
cancelTaskEdit
An asynchronous method. Check the argument and return types below.
cancelTaskEdit(): Promise<boolean>Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
zoomTo
Zoom to an explicit millisecond x window. Task rows do not accept y zoom requests.
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomRequest | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
- CartesianZoomRequest
Type definition
zoomBy
Scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
factor | number | Required |
anchorFraction | number | Optional |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
panBy
Slide the zoomed windows by milliseconds ({ x?, y? }); a no-op at the full extent.
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>| Arguments | Type | Required |
|---|---|---|
delta | { x?: number; y?: number } | Required |
Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
resetZoom
Reset the zoomed or panned range to the original data range.
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>Return type: Promise<CartesianZoomChangeEventDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomChangeEventDetail
Type definition
getZoom
Read the current zoom range. Check the return type's nullability and the range for each axis.
getZoom(): Promise<CartesianZoomState | null>Return type: Promise<CartesianZoomState | null>. Call the method after element registration and await its Promise result.
- CartesianZoomState
Type definition
getZoomExtent
The full timestamp extent and axis key (null before the first layout).
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>| Arguments | Type | Required |
|---|---|---|
request | CartesianZoomExtentRequest | Optional |
Return type: Promise<CartesianZoomExtentDetail | null>. Call the method after element registration and await its Promise result.
- CartesianZoomExtentDetail
Type definition
- CartesianZoomExtentRequest
Type definition
getDataTable
Current normalized table, including the retained stream; independent of GPU availability.
getDataTable(): Promise<ChartDataTable>Return type: Promise<ChartDataTable>. Call the method after element registration and await its Promise result.
- ChartDataTable
Type definition
getLabels
the placed node labels in HOST-local CSS px as shown (the plot offset added; under a zoom the labels of the nodes outside the window are left out), shown or hidden with the reason.
getLabels(): Promise<GanttLabel[]>Return type: Promise<GanttLabel[]>. Call the method after element registration and await its Promise result.
- GanttLabel
Type definition
getTimeAxis
An asynchronous method. Check the argument and return types below.
getTimeAxis(): Promise<GanttTimeAxisModel>Return type: Promise<GanttTimeAxisModel>. Call the method after element registration and await its Promise result.
- GanttTimeAxisModel
Type definition
showCrosshairAt
Quiet sync API: epoch milliseconds and a zero-based task row; no crosshairMove feedback loop.
showCrosshairAt(request: CartesianCrosshairShowRequest): Promise<boolean>| Arguments | Type | Required |
|---|---|---|
request | CartesianCrosshairShowRequest | Required |
Return type: Promise<boolean>. Call the method after element registration and await its Promise result.
- CartesianCrosshairShowRequest
Type definition
hideCrosshair
hide the crosshair shown by showCrosshairAt (or the pointer's).
hideCrosshair(): Promise<void>Return type: Promise<void>. Call the method after element registration and await its Promise result.