# Time ring: a week of chats, hour by hour (Radial Column example)

> WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/radial-column/heat-week/ · Index for agents: https://westcoast-charts.com/llms.txt

A heatmap ring (Monday inside, Sunday outside, one cell per hour) sits under the hourly totals: the cells share the columns' angles, so hovering an hour lights that hour on every day and the tooltip lists the seven days. In the middle a polar area of the channel mix (radius = volume, independent of the ring). Compact layout retains the seven separate days × 24 hours and all five channels; no weekday averaging or row omission is applied.

- Chart type: `radialColumn` (Radial Column)
- Collection: Radial Column · Radial Column · Time rings & goals
- Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/heat-week.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=heat-week

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'

WestCoastCharts.use(premium)
const WestCoastChartsPremium = premium
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
```

## Options

```js
const options = {
  "chart": {
    "type": "radialColumn",
    "height": 580,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Chats",
      "data": [
        49,
        43,
        50,
        56,
        54,
        49,
        44,
        56,
        99,
        142,
        203,
        241,
        306,
        297,
        301,
        285,
        271,
        230,
        182,
        130,
        79,
        64,
        51,
        49
      ]
    }
  ],
  "xaxis": {
    "categories": [
      "00:00",
      "01:00",
      "02:00",
      "03:00",
      "04:00",
      "05:00",
      "06:00",
      "07:00",
      "08:00",
      "09:00",
      "10:00",
      "11:00",
      "12:00",
      "13:00",
      "14:00",
      "15:00",
      "16:00",
      "17:00",
      "18:00",
      "19:00",
      "20:00",
      "21:00",
      "22:00",
      "23:00"
    ]
  },
  "colors": [
    "#818cf8"
  ],
  "plotOptions": {
    "radialColumn": {
      "innerRadius": 0.62,
      "center": {
        "show": false
      },
      "link": {
        "mode": "angle",
        "unit": "hours"
      },
      "layers": [
        {
          "type": "polarArea",
          "name": "Channel",
          "labels": [
            "Web chat",
            "In-app",
            "Email",
            "Phone",
            "Social"
          ],
          "data": [
            412,
            356,
            198,
            121,
            64
          ],
          "thickness": "34%",
          "link": false,
          "colors": [
            "#22d3ee",
            "#818cf8",
            "#f472b6",
            "#fbbf24",
            "#34d399"
          ]
        },
        {
          "type": "heatmap",
          "name": "Chats per hour",
          "data": [
            {
              "name": "Mon",
              "data": [
                4,
                9,
                8,
                8,
                7,
                4,
                5,
                10,
                14,
                26,
                35,
                35,
                52,
                47,
                48,
                45,
                40,
                32,
                23,
                17,
                9,
                6,
                5,
                6
              ]
            },
            {
              "name": "Tue",
              "data": [
                9,
                7,
                6,
                8,
                8,
                6,
                8,
                7,
                15,
                24,
                36,
                43,
                52,
                49,
                49,
                43,
                41,
                31,
                26,
                17,
                9,
                10,
                7,
                5
              ]
            },
            {
              "name": "Wed",
              "data": [
                7,
                5,
                8,
                7,
                7,
                7,
                9,
                6,
                19,
                24,
                34,
                42,
                51,
                50,
                47,
                45,
                43,
                34,
                24,
                19,
                9,
                9,
                9,
                8
              ]
            },
            {
              "name": "Thu",
              "data": [
                10,
                4,
                9,
                8,
                8,
                9,
                4,
                5,
                15,
                25,
                34,
                40,
                56,
                53,
                49,
                46,
                41,
                37,
                26,
                17,
                10,
                7,
                8,
                9
              ]
            },
            {
              "name": "Fri",
              "data": [
                6,
                6,
                4,
                5,
                9,
                10,
                5,
                10,
                18,
                26,
                36,
                45,
                55,
                50,
                51,
                51,
                45,
                37,
                31,
                15,
                6,
                6,
                4,
                4
              ]
            },
            {
              "name": "Sat",
              "data": [
                6,
                5,
                5,
                10,
                9,
                9,
                7,
                9,
                10,
                9,
                13,
                17,
                20,
                24,
                27,
                28,
                29,
                29,
                26,
                22,
                18,
                14,
                9,
                10
              ]
            },
            {
              "name": "Sun",
              "data": [
                7,
                7,
                10,
                10,
                6,
                4,
                6,
                9,
                8,
                8,
                15,
                19,
                20,
                24,
                30,
                27,
                32,
                30,
                26,
                23,
                18,
                12,
                9,
                7
              ]
            }
          ],
          "labels": [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00"
          ],
          "ringGap": 1,
          "color": "#a78bfa"
        }
      ]
    }
  },
  "responsive": [
    {
      "breakpoint": 600,
      "options": {
        "chart": {
          "fontSize": 11,
          "height": 720
        },
        "plotOptions": {
          "radialColumn": {
            "innerRadius": 0.84,
            "hole": 0,
            "layerGap": 3,
            "legend": {
              "position": "bottom"
            },
            "categoryLabels": {
              "offset": 2
            },
            "layers": [
              {
                "type": "polarArea",
                "name": "Channel",
                "labels": [
                  "Web chat",
                  "In-app",
                  "Email",
                  "Phone",
                  "Social"
                ],
                "data": [
                  412,
                  356,
                  198,
                  121,
                  64
                ],
                "thickness": "24%",
                "link": false,
                "colors": [
                  "#22d3ee",
                  "#818cf8",
                  "#f472b6",
                  "#fbbf24",
                  "#34d399"
                ],
                "gap": 2
              },
              {
                "type": "heatmap",
                "name": "Chats per hour",
                "data": [
                  {
                    "name": "Mon",
                    "data": [
                      4,
                      9,
                      8,
                      8,
                      7,
                      4,
                      5,
                      10,
                      14,
                      26,
                      35,
                      35,
                      52,
                      47,
                      48,
                      45,
                      40,
                      32,
                      23,
                      17,
                      9,
                      6,
                      5,
                      6
                    ]
                  },
                  {
                    "name": "Tue",
                    "data": [
                      9,
                      7,
                      6,
                      8,
                      8,
                      6,
                      8,
                      7,
                      15,
                      24,
                      36,
                      43,
                      52,
                      49,
                      49,
                      43,
                      41,
                      31,
                      26,
                      17,
                      9,
                      10,
                      7,
                      5
                    ]
                  },
                  {
                    "name": "Wed",
                    "data": [
                      7,
                      5,
                      8,
                      7,
                      7,
                      7,
                      9,
                      6,
                      19,
                      24,
                      34,
                      42,
                      51,
                      50,
                      47,
                      45,
                      43,
                      34,
                      24,
                      19,
                      9,
                      9,
                      9,
                      8
                    ]
                  },
                  {
                    "name": "Thu",
                    "data": [
                      10,
                      4,
                      9,
                      8,
                      8,
                      9,
                      4,
                      5,
                      15,
                      25,
                      34,
                      40,
                      56,
                      53,
                      49,
                      46,
                      41,
                      37,
                      26,
                      17,
                      10,
                      7,
                      8,
                      9
                    ]
                  },
                  {
                    "name": "Fri",
                    "data": [
                      6,
                      6,
                      4,
                      5,
                      9,
                      10,
                      5,
                      10,
                      18,
                      26,
                      36,
                      45,
                      55,
                      50,
                      51,
                      51,
                      45,
                      37,
                      31,
                      15,
                      6,
                      6,
                      4,
                      4
                    ]
                  },
                  {
                    "name": "Sat",
                    "data": [
                      6,
                      5,
                      5,
                      10,
                      9,
                      9,
                      7,
                      9,
                      10,
                      9,
                      13,
                      17,
                      20,
                      24,
                      27,
                      28,
                      29,
                      29,
                      26,
                      22,
                      18,
                      14,
                      9,
                      10
                    ]
                  },
                  {
                    "name": "Sun",
                    "data": [
                      7,
                      7,
                      10,
                      10,
                      6,
                      4,
                      6,
                      9,
                      8,
                      8,
                      15,
                      19,
                      20,
                      24,
                      30,
                      27,
                      32,
                      30,
                      26,
                      23,
                      18,
                      12,
                      9,
                      7
                    ]
                  }
                ],
                "labels": [
                  "00:00",
                  "01:00",
                  "02:00",
                  "03:00",
                  "04:00",
                  "05:00",
                  "06:00",
                  "07:00",
                  "08:00",
                  "09:00",
                  "10:00",
                  "11:00",
                  "12:00",
                  "13:00",
                  "14:00",
                  "15:00",
                  "16:00",
                  "17:00",
                  "18:00",
                  "19:00",
                  "20:00",
                  "21:00",
                  "22:00",
                  "23:00"
                ],
                "ringGap": 0.5,
                "color": "#a78bfa"
              }
            ]
          }
        }
      }
    }
  ]
}

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