Project Boundary
plotOptions.gantt.boundary draws the project start and deadline as labelled lines and shades the time outside them. Tasks that cross a boundary get a warning mark, a tooltip line and a screen-reader note; api().outOfBounds() lists them.
Open the chart without page chrome ↗Drawing width at least 1,024 px. Scroll within the chart on smaller screens.
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
const options = {
"chart": {
"height": "auto",
"toolbar": {
"show": false
},
"type": "gantt",
"events": {
"mounted": (chart) => console.log('outside the boundary: ' + WestCoastChartsPremium.api(chart).outOfBounds().join(', '))
}
},
"series": [
{
"name": "Discovery",
"data": [
{
"id": "res",
"x": "Customer interviews",
"y": [
1788732000000,
1789682400000
],
"progress": 100,
"assignee": "Iris",
"baseline": [
1788732000000,
1789509600000
]
},
{
"id": "req",
"x": "Requirements",
"y": [
1789509600000,
1790287200000
],
"progress": 100,
"dependsOn": [
"res"
],
"assignee": "Hugo",
"baseline": [
1789336800000,
1790114400000
]
},
{
"id": "scope",
"x": "Scope sign-off",
"y": 1790546400000,
"milestone": true,
"dependsOn": [
"req"
]
}
]
},
{
"name": "Design",
"data": [
{
"id": "flows",
"x": "User flows",
"y": [
1790546400000,
1791496800000
],
"progress": 100,
"dependsOn": [
"scope"
],
"assignee": "Iris",
"baseline": [
1790546400000,
1791324000000
]
},
{
"id": "visual",
"x": "Visual design",
"y": [
1791151200000,
1792533600000
],
"progress": 80,
"dependsOn": [
"flows"
],
"assignee": "Maya",
"baseline": [
1790805600000,
1792015200000
]
},
{
"id": "kit",
"x": "Component kit",
"y": [
1790805600000,
1792101600000
],
"progress": 65,
"dependsOn": [
"scope"
],
"assignee": "Maya"
}
]
},
{
"name": "Build",
"data": [
{
"id": "api",
"x": "API & data model",
"y": [
1791151200000,
1793314800000
],
"progress": 50,
"dependsOn": [
"scope"
],
"assignee": "Tomas",
"baseline": [
1790805600000,
1792969200000
]
},
{
"id": "web",
"x": "Web client",
"y": [
1792360800000,
1794524400000
],
"progress": 20,
"dependsOn": [
"visual",
"kit"
],
"assignee": "Kira"
},
{
"id": "int",
"x": "Integrations",
"y": [
1793574000000,
1794524400000
],
"progress": 0,
"dependsOn": [
"api"
],
"assignee": "Tomas"
},
{
"id": "qa",
"x": "QA & hardening",
"y": [
1794783600000,
1795734000000
],
"progress": 0,
"dependsOn": [
"web",
"int"
],
"assignee": "Nico"
},
{
"id": "go",
"x": "Launch",
"y": 1795993200000,
"milestone": true,
"dependsOn": [
"qa"
]
}
]
}
],
"plotOptions": {
"gantt": {
"today": {
"date": "2026-10-22"
},
"boundary": {
"start": "2026-09-07",
"end": "2026-11-25",
"startLabel": "Kick-off",
"endLabel": "Deadline"
}
}
},
"theme": {
"mode": "light",
"preset": "coastal"
}
}import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import premium from 'west-coast-charts/premium'
WestCoastCharts.use(types).use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"height": "auto",
"toolbar": {
"show": false
},
"type": "gantt",
"events": {
"mounted": (chart) => console.log('outside the boundary: ' + WestCoastChartsPremium.api(chart).outOfBounds().join(', '))
}
},
"series": [
{
"name": "Discovery",
"data": [
{
"id": "res",
"x": "Customer interviews",
"y": [
1788732000000,
1789682400000
],
"progress": 100,
"assignee": "Iris",
"baseline": [
1788732000000,
1789509600000
]
},
{
"id": "req",
"x": "Requirements",
"y": [
1789509600000,
1790287200000
],
"progress": 100,
"dependsOn": [
"res"
],
"assignee": "Hugo",
"baseline": [
1789336800000,
1790114400000
]
},
{
"id": "scope",
"x": "Scope sign-off",
"y": 1790546400000,
"milestone": true,
"dependsOn": [
"req"
]
}
]
},
{
"name": "Design",
"data": [
{
"id": "flows",
"x": "User flows",
"y": [
1790546400000,
1791496800000
],
"progress": 100,
"dependsOn": [
"scope"
],
"assignee": "Iris",
"baseline": [
1790546400000,
1791324000000
]
},
{
"id": "visual",
"x": "Visual design",
"y": [
1791151200000,
1792533600000
],
"progress": 80,
"dependsOn": [
"flows"
],
"assignee": "Maya",
"baseline": [
1790805600000,
1792015200000
]
},
{
"id": "kit",
"x": "Component kit",
"y": [
1790805600000,
1792101600000
],
"progress": 65,
"dependsOn": [
"scope"
],
"assignee": "Maya"
}
]
},
{
"name": "Build",
"data": [
{
"id": "api",
"x": "API & data model",
"y": [
1791151200000,
1793314800000
],
"progress": 50,
"dependsOn": [
"scope"
],
"assignee": "Tomas",
"baseline": [
1790805600000,
1792969200000
]
},
{
"id": "web",
"x": "Web client",
"y": [
1792360800000,
1794524400000
],
"progress": 20,
"dependsOn": [
"visual",
"kit"
],
"assignee": "Kira"
},
{
"id": "int",
"x": "Integrations",
"y": [
1793574000000,
1794524400000
],
"progress": 0,
"dependsOn": [
"api"
],
"assignee": "Tomas"
},
{
"id": "qa",
"x": "QA & hardening",
"y": [
1794783600000,
1795734000000
],
"progress": 0,
"dependsOn": [
"web",
"int"
],
"assignee": "Nico"
},
{
"id": "go",
"x": "Launch",
"y": 1795993200000,
"milestone": true,
"dependsOn": [
"qa"
]
}
]
}
],
"plotOptions": {
"gantt": {
"today": {
"date": "2026-10-22"
},
"boundary": {
"start": "2026-09-07",
"end": "2026-11-25",
"startLabel": "Kick-off",
"endLabel": "Deadline"
}
}
},
"theme": {
"mode": "light",
"preset": "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export gantt-project-boundary.json --out gantt-project-boundary.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/gantt/project-boundary/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?