# Heatmap drilldown (Heatmap example)

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

Click a week/day cell to see its hours.

- Chart type: `heatmap` (Heatmap)
- Collection: Heatmap · Heatmap
- Raw configuration: https://westcoast-charts.com/gallery-src/heatmap/heatmap-with-drilldown.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/gallery/heatmap/heatmap-with-drilldown.html

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import drilldown from 'west-coast-charts/features/drilldown'

WestCoastCharts.use(types).use(drilldown)
```

## Options

Shortened: the full configuration (50 kB, mostly data) is at https://westcoast-charts.com/gallery-src/heatmap/heatmap-with-drilldown.js.

```js
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "heatmap",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "W1",
      data: [
        {
          x: "Mon",
          y: 288,
          drilldown: "W1-Mon"
        },
        {
          x: "Tue",
          y: 401,
          drilldown: "W1-Tue"
        },
        {
          x: "Wed",
          y: 473,
          drilldown: "W1-Wed"
        },
        {
          x: "Thu",
          y: 741,
          drilldown: "W1-Thu"
        },
        {
          x: "Fri",
          y: 274,
          drilldown: "W1-Fri"
        },
        {
          x: "Sat",
          y: 411,
          drilldown: "W1-Sat"
        },
        {
          x: "Sun",
          y: 557,
          drilldown: "W1-Sun"
        }
      ]
    },
    {
      name: "W2",
      data: [
        {
          x: "Mon",
          y: 133,
          drilldown: "W2-Mon"
        },
        {
          x: "Tue",
          y: 136,
          drilldown: "W2-Tue"
        },
        {
          x: "Wed",
          y: 432,
          drilldown: "W2-Wed"
        },
        {
          x: "Thu",
          y: 291,
          drilldown: "W2-Thu"
        },
        {
          x: "Fri",
          y: 308,
          drilldown: "W2-Fri"
        },
        {
          x: "Sat",
          y: 871,
          drilldown: "W2-Sat"
        },
        {
          x: "Sun",
          y: 135,
          drilldown: "W2-Sun"
        }
      ]
    },
    {
      name: "W3",
      data: [
        {
          x: "Mon",
          y: 223,
          drilldown: "W3-Mon"
        },
        {
          x: "Tue",
          y: 324,
          drilldown: "W3-Tue"
        },
        {
          x: "Wed",
          y: 834,
          drilldown: "W3-Wed"
        },
        {
          x: "Thu",
          y: 493,
          drilldown: "W3-Thu"
        },
        {
          x: "Fri",
          y: 267,
          drilldown: "W3-Fri"
        },
        {
          x: "Sat",
          y: 146,
          drilldown: "W3-Sat"
        },
        {
          x: "Sun",
          y: 886,
          drilldown: "W3-Sun"
        }
      ]
    },
    {
      name: "W4",
      data: [
        {
          x: "Mon",
          y: 848,
          drilldown: "W4-Mon"
        },
        {
          x: "Tue",
          y: 376,
          drilldown: "W4-Tue"
        },
        {
          x: "Wed",
          y: 670,
          drilldown: "W4-Wed"
        },
        {
          x: "Thu",
          y: 420,
          drilldown: "W4-Thu"
        },
        {
          x: "Fri",
          y: 848,
          drilldown: "W4-Fri"
        },
        {
          x: "Sat",
          y: 718,
          drilldown: "W4-Sat"
        },
        {
          x: "Sun",
          y: 858,
          drilldown: "W4-Sun"
        }
      ]
    }
  ],
  colors: ["#2563eb"],
  dataLabels: {
    enabled: false
  },
  drilldown: {
    enabled: true,
    series: [
      {
        id: "W1-Mon",
        name: "W1 Mon by hour",
        type: "bar",
        data: [
          {
            x: "0h",
            y: 7
          },
          {
            x: "1h",
            y: 6
          },
          {
            x: "2h",
            y: 6
          },
          {
            x: "3h",
            y: 6
          },
          {
            x: "4h",
            y: 6
          },
          {
            x: "5h",
            y: 5
          },
          {
            x: "6h",
            y: 3
          },
          {
            x: "7h",
            y: 6
          },
          {
            x: "8h",
            y: 9
          },
          {
            x: "9h",
            y: 17
          },
          {
            x: "10h",
            y: 21
          },
          {
            x: "11h",
            y: 24
          },
          {
            x: "12h",
            y: 29
          },
          {
            x: "13h",
            y: 25
          },
          {
            x: "14h",
            y: 25
          },
          {
            x: "15h",
            y: 24
          },
          {
            x: "16h",
            y: 19
          },
          {
            x: "17h",
            y: 15
          },
          {
            x: "18h",
            y: 8
          },
          {
            x: "19h",
            y: 6
          },
          {
            x: "20h",
            y: 6
          },
          {
            x: "21h",
            y: 5
          },
          {
            x: "22h",
            y: 6
          },
          {
            x: "23h",
            y: 3
          }
        ]
      },
      {
        id: "W1-Tue",
        name: "W1 Tue by hour",
        type: "bar",
        data: [
          {
            x: "0h",
            y: 5
          },
          {
            x: "1h",
            y: 8
          },
          {
            x: "2h",
            y: 10
          },
          {
            x: "3h",
            y: 7
          },
          {
            x: "4h",
            y: 9
          },
          {
            x: "5h",
            y: 8
          },
          {
            x: "6h",
            y: 7
          },
          {
            x: "7h",
            y: 4
          },
          {
            x: "8h",
            y: 15
          },
          {
            x: "9h",
            y: 23
          },
          {
            x: "10h",
            y: 30
          },
          {
            x: "11h",
            y: 35
          },
          {
            x: "12h",
            y: 38
          },
          {
            x: "13h",
            y: 36
          },
          {
            x: "14h",
            y: 40
          },
          {
            x: "15h",
            y: 34
          },
          {
            x: "16h",
            y: 27
          },
          {
            x: "17h",
            y: 23
          },
          {
            x: "18h",
            y: 12
          },
          {
            x: "19h",
            y: 4
          },
          {
            x: "20h",
            y: 7
          },
          {
            x: "21h",
            y: 5
          },
          {
            x: "22h",
            y: 10
          },
          {
            x: "23h",
            y: 7
          }
        ]
      },
      {
        id: "W1-Wed",
        name: "W1 Wed by hour",
        type: "bar",
        data: [
          {
            x: "0h",
            y: 11
          },
          {
            x: "1h",
            y: 9
          },
          {
            x: "2h",
            y: 5
          },
          {
            x: "3h",
            y: 8
          },
          {
            x: "4h",
            y: 9
          },
          {
            x: "5h",
            y: 10
          },
          {
            x: "6h",
            y: 8
          },
          {
            x: "7h",
            y: 6
          },
          {
            x: "8h",
            y: 17
          },
          {
            x: "9h",
            y: 30
          },
          {
            x: "10h",
            y: 38
          },
          {
            x: "11h",
            y: 36
          },
          {
            x: "12h",
            y: 45
          },
          {
            x: "13h",
            y: 44
          },
          {
            x: "14h",
            y: 46
          },
          {
            x: "15h",
            y: 38
          },
          {
            x: "16h",
            y: 32
          },
          {
            x: "17h",
            y: 25
          },
          {
            x: "18h",
            y: 14
          },
          {
            x: "19h",
            y: 8
          },
          {
            x: "20h",
            y: 12
          },
          {
            x: "21h",
            y: 6
          },
          {
            x: "22h",
            y: 10
          },
          {
            x: "23h",
            y: 7
          }
        ]
      },
      {
        id: "W1-Thu",
        name: "W1 Thu by hour",
        type: "bar",
        data: [
          {
            x: "0h",
            y: 14
          },
          {
            x: "1h",
            y: 11
          },
          {
            x: "2h",
            y: 10
          },
          {
            x: "3h",
            y: 8
          },
          {
            x: "4h",
            y: 11
          },
          {
            x: "5h",
            y: 18
          },
          {
            x: "6h",
            y: 14
          },
          {
            x: "7h",
            y: 7
          },
          {
            x: "8h",
            y: 32
          },
          {
            x: "9h",
            y: 37
          },
          {
            x: "10h",
            y: 60
          },
          {
            x: "11h",
            y: 66
          },
          {
            x: "12h",
            y: 75
          },
          {
            x: "13h",
            y: 71
          },
          {
            x: "14h",
            y: 67
          },
          {
            x: "15h",
            y: 66
          },
          {
            x: "16h",
            y: 59
          },
          {
            x: "17h",
            y: 37
          },
          {
            x: "18h",
            y: 23
          },
          {
            x: "19h",
            y: 12
          },
          {
            x: "20h",
            y: 11
          },
          {
            x: "21h",
            y: 9
          },
          {
            x: "22h",
            y: 8
          },
          {
            x: "23h",
            y: 14
          }
        ]
      },
      {
        id: "W1-Fri",
        name: "W1 Fri by hour",
        type: "bar",
        data: [
          {
            x: "0h",
            y: 5
          },
          {
            x: "1h",
            y: 4
          },
          {
            x: "2h",
            y: 3
          },
          {
            x: "3h",
            y: 6
          },
          {
            x: "4h",
            y: 4
          },
          {
            x: "5h",
            y: 5
          },
          {
            x: "6h",
            y: 3
          },
          {
            x: "7h",
            y: 4
          },
          {
            x: "8h",
            y: 10
          },
          {
            x: "9h",
            y: 14
          },
          {
            x: "10h",
            y: 22
          },
          {
            x: "11h",
            y: 23
          },
          {
            x: "12h",
            y: 23
          },
          {
            x: "13h",
            y: 28
          },
          {
            x: "14h",
            y: 25
          },
          {
            x: "15h",
            y: 23
          },
          {
            x: "16h",
            y: 18
          },
          {
            x: "17h",
            y: 15
          },
          {
            x: "18h",
            y: 11
          },
          {
            x: "19h",
            y: 5
          },
          {
            x: "20h",
            y: 5
          },
          {
            x: "21h",
            y: 7
          },
          {
            x: "22h",
            y: 6
          },
          {
            x: "23h",
            y: 7
          }
        ]
      },
      {
        id: "W1-Sat",
        name: "W1 Sat by hour",
        type: "bar",
        data: [
          {
            x: "0h",
            y: 5
          },
          {
            x: "1h",
            y: 10
          },
          {
            x: "2h",
            y: 4
          },
          {
            x: "3h",
            y: 10
          },
          {
            x: "4h",
            y: 5
          },
          {
            x: "5h",
            y: 10
          },
          {
            x: "6h",
            y: 8
          },
          {
            x: "7h",
            y: 4
          },
          {
            x: "8h",
            y: 17
          },
          {
            x: "9h",
            y: 22
          },
          {
            x: "10h",
            y: 30
          },
          {
            x: "11h",
            y: 33
          },
          {
            x: "12h",
            y: 35
          },
          {
            x: "13h",
            y: 39
          },
          {
            x: "14h",
            y: 37
          },
          {
            x: "15h",
            y: 36
          },
          {
            x: "16h",
            y: 32
          },
          {
            x: "17h",
            y: 19
          },
          {
            x: "18h",
            y: 16
          },
          {
            x: "19h",
            y: 6
          },
          {
            x: "20h",
            y: 10
          },
          {
            x: "21h",
            y: 9
          },
          {
            x: "22h",
            y: 9
          },
          {
            x: "23h",
            y: 7
          }
        ]
      },
      {
        id: "W1-Sun",
        name: "W1 Sun by hour",
        type: "bar",
        data: [
          {
            x: "0h",
            y: 11
          },
          {
            x: "1h",
            y: 9
          },
          {
            x: "2h",
            y: 5
          },
          {
            x: "3h",
            y: 13
          },
          {
            x: "4h",
            y: 12
          },
          {
            x: "5h",
            y: 7
          },
          {
            x: "6h",
            y: 14
          },
          {
            x: "7h",
            y: 12
          },
          {
            x: "8h",
            y: 21
          },
          {
            x: "9h",
            y: 29
          },
          {
            x: "10h",
            y: 39
          },
          {
            x: "11h",
            y: 47
          },
          {
            x: "12h",
            y: 49
          },
          {
            x: "13h",
            y: 48
          },
          {
            x: "14h",
            y: 47
          },
  // ... truncated, use Copy or open the full config

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 heatmap-heatmap-with-drilldown.json --out heatmap-heatmap-with-drilldown.svg --with-table` (save the options above as JSON first)