Orientation: the SaaS clock turned to the evening incident
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.
Orientation
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
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.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
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()Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export radial-column-orient-quint.json --out radial-column-orient-quint.svg --with-tablePublic agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/radial-column/orient-quint/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?