Download Core

Accessibility

Tab into the chart and use the arrow keys; screen readers get a summary and a data table.

Why it matters keyboard navigation over tasks with announcements, a generated description and an accessible data table (A11y module shared by all premium types)

Chart type
Gantt gantt
Tier
Premium
Collection
Gantt
Render
Live, site theme
View .md Agent setup
LIVE/gantt/accessibility30 of 35 in Gantt

Open the chart without page chrome ↗Drawing width at least 1,024 px. Scroll within the chart on smaller screens.

Configuration

Raw 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"
      }
    }
  },
  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?