Task CRUD
Built-in editing with drag.enabled: drag to move, drag either end to resize, double-click (or F2) to rename in place, Delete to remove, Insert / Alt+N to add, Ctrl+Z / Ctrl+Shift+Z to undo / redo. Every edit fires a cancelable event (taskChange / taskCreate / taskDelete) and historyChange.
Open the chart without page chrome ↗Drawing width at least 1,024 px. Scroll within the chart on smaller screens.
const options = {
chart: {
height: "auto",
toolbar: {
show: false
},
type: "gantt",
events: {
dataPointSelection: (e, ctx, o) => (sel = o.selected && o.selected[0]),
taskChange: (e, ctx, o) => log(o.source + ': ' + (o.name ? '"' + o.previous.name + '" → "' + o.name + '"' : o.task.name + ' ' + new Date(o.start).toDateString())),
taskCreate: (e, ctx, o) => log(o.source + ': added ' + (o.data.x || o.data.name)),
taskDelete: (e, ctx, o) => log(o.source + ': removed ' + (o.data.x || o.data.name)),
historyChange: (e, ctx, o) => log('history: ' + o.undo + ' undo / ' + o.redo + ' redo')
}
},
series: [
{
name: "Vendor selection",
data: [
{
id: "t1",
x: "Draft brief",
y: [1792360800000, 1792620000000],
progress: 100
},
{
id: "t2",
x: "Collect quotes",
y: [1792533600000, 1793142000000],
progress: 30,
dependsOn: ["t1"]
},
{
id: "t3",
x: "Pick vendor",
y: 1793228400000,
milestone: true,
dependsOn: ["t2"]
}
]
}
],
plotOptions: {
gantt: {
today: {
date: "2026-10-22"
},
drag: {
enabled: true,
draw: true
},
range: {
min: 1792188000000,
max: 1793919600000
}
}
},
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 = {
chart: {
height: "auto",
toolbar: {
show: false
},
type: "gantt",
events: {
dataPointSelection: (e, ctx, o) => (sel = o.selected && o.selected[0]),
taskChange: (e, ctx, o) => log(o.source + ': ' + (o.name ? '"' + o.previous.name + '" → "' + o.name + '"' : o.task.name + ' ' + new Date(o.start).toDateString())),
taskCreate: (e, ctx, o) => log(o.source + ': added ' + (o.data.x || o.data.name)),
taskDelete: (e, ctx, o) => log(o.source + ': removed ' + (o.data.x || o.data.name)),
historyChange: (e, ctx, o) => log('history: ' + o.undo + ' undo / ' + o.redo + ' redo')
}
},
series: [
{
name: "Vendor selection",
data: [
{
id: "t1",
x: "Draft brief",
y: [1792360800000, 1792620000000],
progress: 100
},
{
id: "t2",
x: "Collect quotes",
y: [1792533600000, 1793142000000],
progress: 30,
dependsOn: ["t1"]
},
{
id: "t3",
x: "Pick vendor",
y: 1793228400000,
milestone: true,
dependsOn: ["t2"]
}
]
}
],
plotOptions: {
gantt: {
today: {
date: "2026-10-22"
},
drag: {
enabled: true,
draw: true
},
range: {
min: 1792188000000,
max: 1793919600000
}
}
},
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-task-crud.json --out gantt-task-crud.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/task-crud/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?