Custom Columns
Columns from your own task fields with headers, widths and alignment. Below 960 px the grid switches to a task/progress summary; all task data are retained. Use a wider view for the full columns.
Open the chart without page chrome ↗Drawing width at least 1,024 px. Scroll within the chart on smaller screens.
const options = {
"responsive": [
{
"breakpoint": 960,
"options": {
"plotOptions": {
"gantt": {
"grid": {
"width": 180,
"columns": [
{
"key": "name",
"header": "Task / progress",
"value": (_raw, { task }) => (Number.isFinite(task.progress) ? Math.round(task.progress) + '% · ' : '') + task.name
}
]
}
}
}
}
}
],
"chart": {
"height": "auto",
"toolbar": {
"show": false
},
"type": "gantt"
},
"series": [
{
"name": "Discovery",
"data": [
{
"id": "res",
"x": "Customer interviews",
"y": [
1788732000000,
1789682400000
],
"progress": 100,
"assignee": "Iris",
"baseline": [
1788732000000,
1789509600000
],
"team": "Research",
"cost": 8
},
{
"id": "req",
"x": "Requirements",
"y": [
1789509600000,
1790287200000
],
"progress": 100,
"dependsOn": [
"res"
],
"assignee": "Hugo",
"baseline": [
1789336800000,
1790114400000
],
"team": "Product",
"cost": 6
},
{
"id": "scope",
"x": "Scope sign-off",
"y": 1790546400000,
"milestone": true,
"dependsOn": [
"req"
],
"team": "",
"cost": undefined
}
]
},
{
"name": "Design",
"data": [
{
"id": "flows",
"x": "User flows",
"y": [
1790546400000,
1791496800000
],
"progress": 100,
"dependsOn": [
"scope"
],
"assignee": "Iris",
"baseline": [
1790546400000,
1791324000000
],
"team": "Research",
"cost": 12
},
{
"id": "visual",
"x": "Visual design",
"y": [
1791151200000,
1792533600000
],
"progress": 80,
"dependsOn": [
"flows"
],
"assignee": "Maya",
"baseline": [
1790805600000,
1792015200000
],
"team": "Design",
"cost": 18
},
{
"id": "kit",
"x": "Component kit",
"y": [
1790805600000,
1792101600000
],
"progress": 65,
"dependsOn": [
"scope"
],
"assignee": "Maya",
"team": "Design",
"cost": 14
}
]
},
{
"name": "Build",
"data": [
{
"id": "api",
"x": "API & data model",
"y": [
1791151200000,
1793314800000
],
"progress": 50,
"dependsOn": [
"scope"
],
"assignee": "Tomas",
"baseline": [
1790805600000,
1792969200000
],
"team": "Platform",
"cost": 40
},
{
"id": "web",
"x": "Web client",
"y": [
1792360800000,
1794524400000
],
"progress": 20,
"dependsOn": [
"visual",
"kit"
],
"assignee": "Kira",
"team": "Web",
"cost": 36
},
{
"id": "int",
"x": "Integrations",
"y": [
1793574000000,
1794524400000
],
"progress": 0,
"dependsOn": [
"api"
],
"assignee": "Tomas",
"team": "Platform",
"cost": 16
},
{
"id": "qa",
"x": "QA & hardening",
"y": [
1794783600000,
1795734000000
],
"progress": 0,
"dependsOn": [
"web",
"int"
],
"assignee": "Nico",
"team": "QA",
"cost": 12
},
{
"id": "go",
"x": "Launch",
"y": 1795993200000,
"milestone": true,
"dependsOn": [
"qa"
],
"team": "",
"cost": undefined
}
]
}
],
"plotOptions": {
"gantt": {
"today": {
"date": "2026-10-22"
},
"grid": {
"width": 360,
"columns": [
"name",
{
"key": "team",
"header": "Team",
"width": 84
},
{
"key": "cost",
"header": "Cost",
"width": 64,
"align": "end",
"value": (t) => (t.cost ? '€' + t.cost + 'k' : '')
}
]
}
}
},
"theme": {
"mode": "light",
"preset": "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()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 = {
"responsive": [
{
"breakpoint": 960,
"options": {
"plotOptions": {
"gantt": {
"grid": {
"width": 180,
"columns": [
{
"key": "name",
"header": "Task / progress",
"value": (_raw, { task }) => (Number.isFinite(task.progress) ? Math.round(task.progress) + '% · ' : '') + task.name
}
]
}
}
}
}
}
],
"chart": {
"height": "auto",
"toolbar": {
"show": false
},
"type": "gantt"
},
"series": [
{
"name": "Discovery",
"data": [
{
"id": "res",
"x": "Customer interviews",
"y": [
1788732000000,
1789682400000
],
"progress": 100,
"assignee": "Iris",
"baseline": [
1788732000000,
1789509600000
],
"team": "Research",
"cost": 8
},
{
"id": "req",
"x": "Requirements",
"y": [
1789509600000,
1790287200000
],
"progress": 100,
"dependsOn": [
"res"
],
"assignee": "Hugo",
"baseline": [
1789336800000,
1790114400000
],
"team": "Product",
"cost": 6
},
{
"id": "scope",
"x": "Scope sign-off",
"y": 1790546400000,
"milestone": true,
"dependsOn": [
"req"
],
"team": "",
"cost": undefined
}
]
},
{
"name": "Design",
"data": [
{
"id": "flows",
"x": "User flows",
"y": [
1790546400000,
1791496800000
],
"progress": 100,
"dependsOn": [
"scope"
],
"assignee": "Iris",
"baseline": [
1790546400000,
1791324000000
],
"team": "Research",
"cost": 12
},
{
"id": "visual",
"x": "Visual design",
"y": [
1791151200000,
1792533600000
],
"progress": 80,
"dependsOn": [
"flows"
],
"assignee": "Maya",
"baseline": [
1790805600000,
1792015200000
],
"team": "Design",
"cost": 18
},
{
"id": "kit",
"x": "Component kit",
"y": [
1790805600000,
1792101600000
],
"progress": 65,
"dependsOn": [
"scope"
],
"assignee": "Maya",
"team": "Design",
"cost": 14
}
]
},
{
"name": "Build",
"data": [
{
"id": "api",
"x": "API & data model",
"y": [
1791151200000,
1793314800000
],
"progress": 50,
"dependsOn": [
"scope"
],
"assignee": "Tomas",
"baseline": [
1790805600000,
1792969200000
],
"team": "Platform",
"cost": 40
},
{
"id": "web",
"x": "Web client",
"y": [
1792360800000,
1794524400000
],
"progress": 20,
"dependsOn": [
"visual",
"kit"
],
"assignee": "Kira",
"team": "Web",
"cost": 36
},
{
"id": "int",
"x": "Integrations",
"y": [
1793574000000,
1794524400000
],
"progress": 0,
"dependsOn": [
"api"
],
"assignee": "Tomas",
"team": "Platform",
"cost": 16
},
{
"id": "qa",
"x": "QA & hardening",
"y": [
1794783600000,
1795734000000
],
"progress": 0,
"dependsOn": [
"web",
"int"
],
"assignee": "Nico",
"team": "QA",
"cost": 12
},
{
"id": "go",
"x": "Launch",
"y": 1795993200000,
"milestone": true,
"dependsOn": [
"qa"
],
"team": "",
"cost": undefined
}
]
}
],
"plotOptions": {
"gantt": {
"today": {
"date": "2026-10-22"
},
"grid": {
"width": 360,
"columns": [
"name",
{
"key": "team",
"header": "Team",
"width": 84
},
{
"key": "cost",
"header": "Cost",
"width": 64,
"align": "end",
"value": (t) => (t.cost ? '€' + t.cost + 'k' : '')
}
]
}
}
},
"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-custom-columns.json --out gantt-custom-columns.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/custom-columns/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?