Scroll To Task

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: 420,
    toolbar: {
      show: false
    },
    type: "gantt"
  },
  series: [
    {
      name: "Stream 1",
      data: [
        {
          id: "w1-1",
          x: "Work package 1.1",
          y: [1788559200000, 1788904800000],
          progress: 28
        },
        {
          id: "w1-2",
          x: "Work package 1.2",
          y: [1788904800000, 1789682400000],
          progress: 59
        },
        {
          id: "w1-3",
          x: "Work package 1.3",
          y: [1789250400000, 1789855200000],
          progress: 3
        },
        {
          id: "w1-4",
          x: "Work package 1.4",
          y: [1789596000000, 1790373600000],
          progress: 54
        },
        {
          id: "w1-5",
          x: "Work package 1.5",
          y: [1789941600000, 1790805600000],
          progress: 48
        },
        {
          id: "w1-6",
          x: "Work package 1.6",
          y: [1790287200000, 1790978400000],
          progress: 61
        }
      ]
    },
    {
      name: "Stream 2",
      data: [
        {
          id: "w2-1",
          x: "Work package 2.1",
          y: [1789768800000, 1790114400000],
          progress: 56
        },
        {
          id: "w2-2",
          x: "Work package 2.2",
          y: [1790114400000, 1791151200000],
          progress: 75
        },
        {
          id: "w2-3",
          x: "Work package 2.3",
          y: [1790460000000, 1791324000000],
          progress: 34
        },
        {
          id: "w2-4",
          x: "Work package 2.4",
          y: [1790805600000, 1791496800000],
          progress: 11
        },
        {
          id: "w2-5",
          x: "Work package 2.5",
          y: [1791151200000, 1791928800000],
          progress: 11
        },
        {
          id: "w2-6",
          x: "Work package 2.6",
          y: [1791496800000, 1792188000000],
          progress: 20
        }
      ]
    },
    {
      name: "Stream 3",
      data: [
        {
          id: "w3-1",
          x: "Work package 3.1",
          y: [1790978400000, 1791324000000],
          progress: 20
        },
        {
          id: "w3-2",
          x: "Work package 3.2",
          y: [1791324000000, 1791842400000],
          progress: 79
        },
        {
          id: "w3-3",
          x: "Work package 3.3",
          y: [1791669600000, 1792620000000],
          progress: 98
        },
        {
          id: "w3-4",
          x: "Work package 3.4",
          y: [1792015200000, 1792620000000],
          progress: 0
        },
        {
          id: "w3-5",
          x: "Work package 3.5",
          y: [1792360800000, 1793138400000],
          progress: 11
        },
        {
          id: "w3-6",
          x: "Work package 3.6",
          y: [1792706400000, 1793484000000],
          progress: 93
        }
      ]
    },
    {
      name: "Stream 4",
      data: [
        {
          id: "w4-1",
          x: "Work package 4.1",
          y: [1792188000000, 1792965600000],
          progress: 45
        },
        {
          id: "w4-2",
          x: "Work package 4.2",
          y: [1792533600000, 1793311200000],
          progress: 83
        },
        {
          id: "w4-3",
          x: "Work package 4.3",
          y: [1792879200000, 1793829600000],
          progress: 57
        },
        {
          id: "w4-4",
          x: "Work package 4.4",
          y: [1793224800000, 1793916000000],
          progress: 4
        },
        {
          id: "w4-5",
          x: "Work package 4.5",
          y: [1793570400000, 1794434400000],
          progress: 12
        },
        {
          id: "w4-6",
          x: "Work package 4.6",
          y: [1793916000000, 1794520800000],
          progress: 7
        }
      ]
    },
    {
      name: "Stream 5",
      data: [
        {
          id: "w5-1",
          x: "Work package 5.1",
          y: [1793397600000, 1794348000000],
          progress: 30
        },
        {
          id: "w5-2",
          x: "Work package 5.2",
          y: [1793743200000, 1794520800000],
          progress: 9
        },
        {
          id: "w5-3",
          x: "Work package 5.3",
          y: [1794088800000, 1794693600000],
          progress: 15
        },
        {
          id: "w5-4",
          x: "Work package 5.4",
          y: [1794434400000, 1794952800000],
          progress: 85
        },
        {
          id: "w5-5",
          x: "Work package 5.5",
          y: [1794780000000, 1795298400000],
          progress: 96
        },
        {
          id: "w5-6",
          x: "Work package 5.6",
          y: [1795125600000, 1795471200000],
          progress: 56
        }
      ]
    },
    {
      name: "Stream 6",
      data: [
        {
          id: "w6-1",
          x: "Work package 6.1",
          y: [1794607200000, 1795384800000],
          progress: 66
        },
        {
          id: "w6-2",
          x: "Work package 6.2",
          y: [1794952800000, 1795471200000],
          progress: 36
        },
        {
          id: "w6-3",
          x: "Work package 6.3",
          y: [1795298400000, 1796162400000],
          progress: 14
        },
        {
          id: "w6-4",
          x: "Work package 6.4",
          y: [1795644000000, 1796680800000],
          progress: 4
        },
        {
          id: "w6-5",
          x: "Work package 6.5",
          y: [1795989600000, 1796940000000],
          progress: 11
        },
        {
          id: "w6-6",
          x: "Work package 6.6",
          y: [1796335200000, 1797285600000],
          progress: 91
        }
      ]
    }
  ],
  plotOptions: {
    gantt: {
      today: {
        date: "2026-10-22"
      }
    }
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()