# Orientation: the SaaS clock turned to the evening incident (Radial Column example)

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

The quint clock opens turned 90° so the evening sits on top: 18:00 at 12 o'clock, the 00:00 start at 3 o'clock (bold label, dashed seam). Every ring — latency, cost, error budget, traffic, the incident wedge — turns with the bars. Use the buttons top right, [ and ] on the focused chart (3-hour steps), Home to reset, or double-click a slot (Shift+Enter on a focused one) to bring it to the top. The turn is part of the view state and share link. Compact screens keep every 10-minute slot and every displayed service/cluster row; only the empty centre, ring gaps and legend placement shrink. The two heat layers still show the explicitly named three-row story selection, not an aggregate of six rows.

- Chart type: `radialColumn` (Radial Column)
- Collection: Radial Column · Radial Column · Orientation
- Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/orient-quint.js
- Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=orient-quint

## Setup

```js
import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'
import orient from 'west-coast-charts/features/orient'
import quint from 'west-coast-charts/layers/quint'

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

## Options

First chart of the page only; the example combines several charts or controls. Read the standalone example for the full source.

```js
const options = {
  "chart": {
    "type": "radialColumn",
    "height": 720,
    "toolbar": {
      "show": false
    },
    "orient": {
      "enabled": true,
      "angle": 90
    }
  },
  "series": [
    {
      "name": "Requests (per 10 min)",
      "data": [
        {
          "x": "00:00",
          "y": 14280,
          "meta": {
            "err": 0.23,
            "typ": -1
          }
        },
        {
          "x": "00:10",
          "y": 14580,
          "meta": {
            "err": 0.35,
            "typ": 1
          }
        },
        {
          "x": "00:20",
          "y": 14820,
          "meta": {
            "err": 0.32,
            "typ": 2
          }
        },
        {
          "x": "00:30",
          "y": 14520,
          "meta": {
            "err": 0.34,
            "typ": -1
          }
        },
        {
          "x": "00:40",
          "y": 14640,
          "meta": {
            "err": 0.28,
            "typ": 0
          }
        },
        {
          "x": "00:50",
          "y": 15000,
          "meta": {
            "err": 0.29,
            "typ": 2
          }
        },
        {
          "x": "01:00",
          "y": 15300,
          "meta": {
            "err": 0.31,
            "typ": 3
          }
        },
        {
          "x": "01:10",
          "y": 15360,
          "meta": {
            "err": 0.25,
            "typ": 3
          }
        },
        {
          "x": "01:20",
          "y": 14940,
          "meta": {
            "err": 0.25,
            "typ": 0
          }
        },
        {
          "x": "01:30",
          "y": 15300,
          "meta": {
            "err": 0.3,
            "typ": 1
          }
        },
        {
          "x": "01:40",
          "y": 15360,
          "meta": {
            "err": 0.24,
            "typ": 0
          }
        },
        {
          "x": "01:50",
          "y": 15420,
          "meta": {
            "err": 0.22,
            "typ": 0
          }
        },
        {
          "x": "02:00",
          "y": 15540,
          "meta": {
            "err": 0.26,
            "typ": 0
          }
        },
        {
          "x": "02:10",
          "y": 16020,
          "meta": {
            "err": 0.22,
            "typ": 2
          }
        },
        {
          "x": "02:20",
          "y": 15600,
          "meta": {
            "err": 0.27,
            "typ": -2
          }
        },
        {
          "x": "02:30",
          "y": 16020,
          "meta": {
            "err": 0.23,
            "typ": 0
          }
        },
        {
          "x": "02:40",
          "y": 16740,
          "meta": {
            "err": 0.32,
            "typ": 3
          }
        },
        {
          "x": "02:50",
          "y": 16440,
          "meta": {
            "err": 0.33,
            "typ": 1
          }
        },
        {
          "x": "03:00",
          "y": 16920,
          "meta": {
            "err": 0.24,
            "typ": 3
          }
        },
        {
          "x": "03:10",
          "y": 16440,
          "meta": {
            "err": 0.27,
            "typ": -1
          }
        },
        {
          "x": "03:20",
          "y": 16800,
          "meta": {
            "err": 0.36,
            "typ": 1
          }
        },
        {
          "x": "03:30",
          "y": 16260,
          "meta": {
            "err": 0.2,
            "typ": -4
          }
        },
        {
          "x": "03:40",
          "y": 17280,
          "meta": {
            "err": 0.21,
            "typ": 2
          }
        },
        {
          "x": "03:50",
          "y": 16800,
          "meta": {
            "err": 0.38,
            "typ": -2
          }
        },
        {
          "x": "04:00",
          "y": 18000,
          "meta": {
            "err": 0.38,
            "typ": 5
          }
        },
        {
          "x": "04:10",
          "y": 16920,
          "meta": {
            "err": 0.23,
            "typ": -2
          }
        },
        {
          "x": "04:20",
          "y": 17040,
          "meta": {
            "err": 0.23,
            "typ": -2
          }
        },
        {
          "x": "04:30",
          "y": 17820,
          "meta": {
            "err": 0.23,
            "typ": 2
          }
        },
        {
          "x": "04:40",
          "y": 17520,
          "meta": {
            "err": 0.38,
            "typ": 0
          }
        },
        {
          "x": "04:50",
          "y": 16800,
          "meta": {
            "err": 0.38,
            "typ": -4
          }
        },
        {
          "x": "05:00",
          "y": 17340,
          "meta": {
            "err": 0.38,
            "typ": -1
          }
        },
        {
          "x": "05:10",
          "y": 17640,
          "meta": {
            "err": 0.33,
            "typ": 0
          }
        },
        {
          "x": "05:20",
          "y": 17040,
          "meta": {
            "err": 0.3,
            "typ": -3
          }
        },
        {
          "x": "05:30",
          "y": 17580,
          "meta": {
            "err": 0.34,
            "typ": 0
          }
        },
        {
          "x": "05:40",
          "y": 16980,
          "meta": {
            "err": 0.38,
            "typ": -4
          }
        },
        {
          "x": "05:50",
          "y": 17700,
          "meta": {
            "err": 0.19,
            "typ": 1
          }
        },
        {
          "x": "06:00",
          "y": 18420,
          "meta": {
            "err": 0.39,
            "typ": 5
          }
        },
        {
          "x": "06:10",
          "y": 17340,
          "meta": {
            "err": 0.34,
            "typ": 0
          }
        },
        {
          "x": "06:20",
          "y": 17340,
          "meta": {
            "err": 0.27,
            "typ": 0
          }
        },
        {
          "x": "06:30",
          "y": 17460,
          "meta": {
            "err": 0.32,
            "typ": 1
          }
        },
        {
          "x": "06:40",
          "y": 17520,
          "meta": {
            "err": 0.27,
            "typ": 1
          }
        },
        {
          "x": "06:50",
          "y": 17340,
          "meta": {
            "err": 1.3,
            "typ": 1
          }
        },
        {
          "x": "07:00",
          "y": 17760,
          "meta": {
            "err": 1.12,
            "typ": 4
          }
        },
        {
          "x": "07:10",
          "y": 16980,
          "meta": {
            "err": 1.2,
            "typ": -1
          }
        },
        {
          "x": "07:20",
          "y": 17400,
          "meta": {
            "err": 1.12,
            "typ": 2
          }
        },
        {
          "x": "07:30",
          "y": 16920,
          "meta": {
            "err": 1.19,
            "typ": 0
          }
        },
        {
          "x": "07:40",
          "y": 17220,
          "meta": {
            "err": 0.26,
            "typ": 2
          }
        },
        {
          "x": "07:50",
          "y": 16800,
          "meta": {
            "err": 0.3,
            "typ": -1
          }
        },
        {
          "x": "08:00",
          "y": 16560,
          "meta": {
            "err": 0.23,
            "typ": -2
          }
        },
        {
          "x": "08:10",
          "y": 16680,
          "meta": {
            "err": 0.35,
            "typ": -1
          }
        },
        {
          "x": "08:20",
          "y": 17640,
          "meta": {
            "err": 0.33,
            "typ": 4
          }
        },
        {
          "x": "08:30",
          "y": 17280,
          "meta": {
            "err": 0.31,
            "typ": 2
          }
        },
        {
          "x": "08:40",
          "y": 16980,
          "meta": {
            "err": 0.21,
            "typ": 0
          }
        },
        {
          "x": "08:50",
          "y": 16140,
          "meta": {
            "err": 0.18,
            "typ": -5
          }
        },
        {
          "x": "09:00",
          "y": 17160,
          "meta": {
            "err": 0.21,
            "typ": 0
          }
        },
        {
          "x": "09:10",
          "y": 16800,
          "meta": {
            "err": 0.28,
            "typ": -2
          }
        },
        {
          "x": "09:20",
          "y": 17880,
          "meta": {
            "err": 0.35,
            "typ": 3
          }
        },
        {
          "x": "09:30",
          "y": 16980,
          "meta": {
            "err": 0.23,
            "typ": -2
          }
        },
        {
          "x": "09:40",
          "y": 17880,
          "meta": {
            "err": 0.38,
            "typ": 2
          }
        },
        {
          "x": "09:50",
          "y": 17340,
          "meta": {
            "err": 0.31,
            "typ": -2
          }
        },
        {
          "x": "10:00",
          "y": 17160,
          "meta": {
            "err": 0.32,
            "typ": -4
          }
        },
        {
          "x": "10:10",
          "y": 18360,
          "meta": {
            "err": 0.2,
            "typ": 1
          }
        },
        {
          "x": "10:20",
          "y": 17820,
          "meta": {
            "err": 0.18,
            "typ": -3
          }
        },
        {
          "x": "10:30",
          "y": 18060,
          "meta": {
            "err": 0.38,
            "typ": -2
          }
        },
        {
          "x": "10:40",
          "y": 19140,
          "meta": {
            "err": 0.37,
            "typ": 2
          }
        },
        {
          "x": "10:50",
          "y": 19800,
          "meta": {
            "err": 0.31,
            "typ": 5
          }
        },
        {
          "x": "11:00",
          "y": 18960,
          "meta": {
            "err": 0.29,
            "typ": -1
          }
        },
        {
          "x": "11:10",
          "y": 19740,
          "meta": {
            "err": 0.32,
            "typ": 2
          }
        },
        {
          "x": "11:20",
          "y": 20400,
          "meta": {
            "err": 0.4,
            "typ": 4
          }
        },
        {
          "x": "11:30",
          "y": 19980,
          "meta": {
            "err": 0.39,
            "typ": 0
          }
        },
        {
          "x": "11:40",
          "y": 19680,
          "meta": {
            "err": 0.37,
            "typ": -3
          }
        },
        {
          "x": "11:50",
          "y": 21060,
          "meta": {
            "err": 0.35,
            "typ": 3
          }
        },
        {
          "x": "12:00",
          "y": 20220,
          "meta": {
            "err": 0.2,
            "typ": -2
          }
        },
        {
          "x": "12:10",
          "y": 21840,
          "meta": {
            "err": 0.34,
            "typ": 4
          }
        },
        {
          "x": "12:20",
          "y": 21360,
          "meta": {
            "err": 0.3,
            "typ": 1
          }
        },
        {
          "x": "12:30",
          "y": 21960,
          "meta": {
            "err": 0.28,
            "typ": 3
          }
        },
        {
          "x": "12:40",
          "y": 21240,
          "meta": {
            "err": 0.23,
            "typ": -2
          }
        },
        {
          "x": "12:50",
          "y": 22620,
          "meta": {
            "err": 0.33,
            "typ": 4
          }
        },
        {
          "x": "13:00",
          "y": 22320,
          "meta": {
            "err": 0.38,
            "typ": 2
          }
        },
        {
          "x": "13:10",
          "y": 21000,
          "meta": {
            "err": 0.18,
            "typ": -5
          }
        },
        {
          "x": "13:20",
          "y": 22680,
          "meta": {
            "err": 0.23,
            "typ": 2
          }
        },
        {
          "x": "13:30",
          "y": 23160,
          "meta": {
            "err": 0.21,
            "typ": 3
          }
        },
        {
          "x": "13:40",
          "y": 22560,
          "meta": {
            "err": 0.31,
            "typ": 0
          }
        },
        {
          "x": "13:50",
          "y": 22800,
          "meta": {
            "err": 0.34,
            "typ": 0
          }
        },
        {
          "x": "14:00",
          "y": 23580,
          "meta": {
            "err": 0.35,
            "typ": 3
          }
        },
        {
          "x": "14:10",
          "y": 23400,
          "meta": {
            "err": 0.2,
            "typ": 2
          }
        },
        {
          "x": "14:20",
          "y": 22140,
          "meta": {
            "err": 0.31,
            "typ": -3
          }
        },
        {
          "x": "14:30",
          "y": 22440,
          "meta": {
            "err": 0.32,
            "typ": -2
          }
        },
        {
          "x": "14:40",
          "y": 23520,
          "meta": {
            "err": 0.19,
            "typ": 2
          }
        },
        {
          "x": "14:50",
          "y": 23460,
          "meta": {
            "err": 0.33,
            "typ": 2
          }
        },
        {
          "x": "15:00",
          "y": 23520,
          "meta": {
            "err": 0.29,
            "typ": 1
          }
        },
        {
          "x": "15:10",
          "y": 23820,
          "meta": {
            "err": 0.35,
            "typ": 3
          }
        },
        {
          "x": "15:20",
          "y": 24120,
          "meta": {
            "err": 0.22,
            "typ": 4
          }
        },
        {
          "x": "15:30",
          "y": 23160,
          "meta": {
            "err": 0.39,
            "typ": -1
          }
        },
        {
          "x": "15:40",
          "y": 23460,
          "meta": {
            "err": 0.24,
  // Full configuration available through Raw or Copy.

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