# Server load live: gauge now, ring = last 60 minutes (Radial Column example)

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

The gauge in the middle is the current load; the column ring is the same metric over the last 60 minutes, newest at the dashed “now” tick. Every tick the gauge animates and the oldest minute rolls off the ring (simulated; pauses while the tab is hidden).

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

## 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": 560,
    "toolbar": {
      "show": false
    }
  },
  "series": [
    {
      "name": "Load",
      "data": [
        34,
        40,
        48,
        55,
        62,
        66,
        68,
        66,
        60,
        51,
        49,
        46,
        43,
        41,
        41,
        43,
        45,
        48,
        49,
        58,
        63,
        65,
        63,
        58,
        51,
        43,
        35,
        28,
        32,
        38,
        45,
        51,
        57,
        60,
        60,
        57,
        50,
        49,
        46,
        42,
        38,
        35,
        35,
        35,
        37,
        39,
        48,
        55,
        60,
        60,
        57,
        51,
        43,
        34,
        25,
        27,
        30,
        35,
        40,
        46
      ]
    }
  ],
  "xaxis": {
    "categories": [
      "13:00",
      "13:01",
      "13:02",
      "13:03",
      "13:04",
      "13:05",
      "13:06",
      "13:07",
      "13:08",
      "13:09",
      "13:10",
      "13:11",
      "13:12",
      "13:13",
      "13:14",
      "13:15",
      "13:16",
      "13:17",
      "13:18",
      "13:19",
      "13:20",
      "13:21",
      "13:22",
      "13:23",
      "13:24",
      "13:25",
      "13:26",
      "13:27",
      "13:28",
      "13:29",
      "13:30",
      "13:31",
      "13:32",
      "13:33",
      "13:34",
      "13:35",
      "13:36",
      "13:37",
      "13:38",
      "13:39",
      "13:40",
      "13:41",
      "13:42",
      "13:43",
      "13:44",
      "13:45",
      "13:46",
      "13:47",
      "13:48",
      "13:49",
      "13:50",
      "13:51",
      "13:52",
      "13:53",
      "13:54",
      "13:55",
      "13:56",
      "13:57",
      "13:58",
      "13:59"
    ]
  },
  "plotOptions": {
    "radialColumn": {
      "aggregate": "mean",
      "innerRadius": 0.62,
      "startAngle": -150,
      "endAngle": 150,
      "hole": "70%",
      "fill": {
        "type": "value",
        "stops": [
          "#22c55e",
          "#a3e635",
          "#f59e0b",
          "#ef4444"
        ]
      },
      "valueAxis": {
        "min": 0,
        "max": 100,
        "labels": {
          "formatter": function (v) { return v + '%' }
        }
      },
      "categoryLabels": {
        "step": 1,
        "orientation": "horizontal",
        "formatter": function (c, o) { return /0$/.test(c) && o.index > 2 && o.index < 55 ? c : '' }
      },
      "link": {
        "mode": "auto",
        "unit": "minutes"
      },
      "layers": [
        {
          "type": "gauge",
          "name": "Load now",
          "follow": "Load",
          "startAngle": -125,
          "endAngle": 125,
          "thickness": 16,
          "formatter": function (v) { return Math.round(v) + '%' },
          "bands": [
            {
              "to": 55,
              "color": "#22c55e"
            },
            {
              "to": 75,
              "color": "#f59e0b"
            },
            {
              "to": 100,
              "color": "#ef4444"
            }
          ]
        }
      ]
    }
  }
}

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