Core herunterladen

Ansichtszustand speichern

plotOptions.gantt.persist: { key } speichert Ansicht (Zoom und Scrollposition), eingeklappte Gruppen und optional die Auswahl in localStorage und stellt sie beim nächsten Laden wieder her. Zoomen Sie oder klappen Sie eine Gruppe ein und laden Sie die Seite neu. api().clearSavedState() löscht den gespeicherten Zustand.

Chart type
Gantt gantt
Tier
Premium
Collection
Gantt
Zeichnen
Live im Website-Design
.md ansehen Agenten einrichten
LIVE/gantt/state-persistence32 of 35 in Gantt

Diagramm ohne Website-Rahmen öffnen ↗Drawing width at least 1,024 px. Scroll within the chart on smaller screens.

Configuration

Original Standalone 
const options = {
  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]
        },
        {
          id: "req",
          x: "Requirements",
          y: [1789509600000, 1790287200000],
          progress: 100,
          dependsOn: ["res"],
          assignee: "Hugo",
          baseline: [1789336800000, 1790114400000]
        },
        {
          id: "scope",
          x: "Scope sign-off",
          y: 1790546400000,
          milestone: true,
          dependsOn: ["req"]
        }
      ]
    },
    {
      name: "Design",
      data: [
        {
          id: "flows",
          x: "User flows",
          y: [1790546400000, 1791496800000],
          progress: 100,
          dependsOn: ["scope"],
          assignee: "Iris",
          baseline: [1790546400000, 1791324000000]
        },
        {
          id: "visual",
          x: "Visual design",
          y: [1791151200000, 1792533600000],
          progress: 80,
          dependsOn: ["flows"],
          assignee: "Maya",
          baseline: [1790805600000, 1792015200000]
        },
        {
          id: "kit",
          x: "Component kit",
          y: [1790805600000, 1792101600000],
          progress: 65,
          dependsOn: ["scope"],
          assignee: "Maya"
        }
      ]
    },
    {
      name: "Build",
      data: [
        {
          id: "api",
          x: "API & data model",
          y: [1791151200000, 1793314800000],
          progress: 50,
          dependsOn: ["scope"],
          assignee: "Tomas",
          baseline: [1790805600000, 1792969200000]
        },
        {
          id: "web",
          x: "Web client",
          y: [1792360800000, 1794524400000],
          progress: 20,
          dependsOn: ["visual", "kit"],
          assignee: "Kira"
        },
        {
          id: "int",
          x: "Integrations",
          y: [1793574000000, 1794524400000],
          progress: 0,
          dependsOn: ["api"],
          assignee: "Tomas"
        },
        {
          id: "qa",
          x: "QA & hardening",
          y: [1794783600000, 1795734000000],
          progress: 0,
          dependsOn: ["web", "int"],
          assignee: "Nico"
        },
        {
          id: "go",
          x: "Launch",
          y: 1795993200000,
          milestone: true,
          dependsOn: ["qa"]
        }
      ]
    }
  ],
  plotOptions: {
    gantt: {
      today: {
        date: "2026-10-22"
      },
      selection: {
        enabled: true
      },
      persist: {
        key: "wcc-gallery-gantt-state-v2",
        selection: true
      }
    }
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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

This example uses Premium modules. Compare licences · Embedding in a distributed product?