# Task CRUD (Gantt example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/gantt/task-crud/ · Index for agents: https://westcoast-charts.com/llms.txt

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.

- Chart type: `gantt` (Gantt)
- Collection: Gantt · Gantt
- Raw configuration: https://westcoast-charts.com/gallery-src/gantt/task-crud.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/premium/gantt/task-crud.html

## Setup

```js
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
```

## Options

```js
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()
```

## Verify

- Text check (Library 1.1.5): load `west-coast-charts/agent/describe` and call `chart.describe({ format: "json" })` for the actual drawn state. The live reader is on this example’s HTML page.
- Command line (Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm, https://westcoast-charts.com/docs/cli/index.md): `wcc chart export gantt-task-crud.json --out gantt-task-crud.svg --with-table` (save the options above as JSON first)