Split Tasks
Tasks interrupted by a holiday freeze, drawn as parts joined through the pause (segments: [[start, end], ...]); progress fills the working time, durations count working parts only, and dragging moves all parts. 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": "Audit",
"data": [
{
"id": "p",
"x": "Preparation",
"y": [
1796079600000,
1796684400000
],
"progress": 100
},
{
"id": "f",
"x": "Field work",
"segments": [
[
1796684400000,
1797634800000
],
[
1799103600000,
1799881200000
]
],
"progress": 60,
"dependsOn": [
"p"
]
},
{
"id": "q",
"x": "Interviews",
"segments": [
[
1796857200000,
1797289200000
],
[
1797462000000,
1797634800000
],
[
1799276400000,
1799708400000
]
],
"progress": 35,
"dependsOn": [
{
"id": "f",
"type": "SS",
"lag": 2
}
]
},
{
"id": "r",
"x": "Report",
"y": [
1799881200000,
1800572400000
],
"dependsOn": [
"f",
"q"
]
}
]
}
],
"plotOptions": {
"gantt": {
"today": {
"show": false
},
"drag": {
"enabled": true
},
"grid": {
"width": 310,
"columns": [
"name",
{
"key": "start",
"width": 64
},
{
"key": "duration",
"width": 48
}
]
}
}
},
"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": "Audit",
"data": [
{
"id": "p",
"x": "Preparation",
"y": [
1796079600000,
1796684400000
],
"progress": 100
},
{
"id": "f",
"x": "Field work",
"segments": [
[
1796684400000,
1797634800000
],
[
1799103600000,
1799881200000
]
],
"progress": 60,
"dependsOn": [
"p"
]
},
{
"id": "q",
"x": "Interviews",
"segments": [
[
1796857200000,
1797289200000
],
[
1797462000000,
1797634800000
],
[
1799276400000,
1799708400000
]
],
"progress": 35,
"dependsOn": [
{
"id": "f",
"type": "SS",
"lag": 2
}
]
},
{
"id": "r",
"x": "Report",
"y": [
1799881200000,
1800572400000
],
"dependsOn": [
"f",
"q"
]
}
]
}
],
"plotOptions": {
"gantt": {
"today": {
"show": false
},
"drag": {
"enabled": true
},
"grid": {
"width": 310,
"columns": [
"name",
{
"key": "start",
"width": 64
},
{
"key": "duration",
"width": 48
}
]
}
}
},
"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-split-tasks.json --out gantt-split-tasks.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/split-tasks/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?