Matrix core: service calls inside error budgets and latency
Which service relationships coincide with high latency and a depleted error budget?
Control rooms
How to read this example
- Matrix
- The row service calls the column service, in requests per second.
- Inner rings
- The remaining 30-day error budget for each service.
- Outer bars
- p95 latency in milliseconds, per service and four-hour window.
Try thisHover Matching → Geo index to compare the call and its reverse, and follow both services into the surrounding rings. Arrow keys move through the matrix.
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
const options = {
"chart": {
"type": "radialColumn",
"height": 640,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "p95 latency (ms)",
"data": [
{
"x": "Edge · 00h",
"y": 24,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 04h",
"y": 22,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 08h",
"y": 47,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 12h",
"y": 37,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 16h",
"y": 51,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 20h",
"y": 46,
"fillColor": "#38bdf8"
},
{
"x": "Rider API · 00h",
"y": 82,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 04h",
"y": 68,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 08h",
"y": 142,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 12h",
"y": 112,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 16h",
"y": 152,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 20h",
"y": 140,
"fillColor": "#818cf8"
},
{
"x": "Driver API · 00h",
"y": 88,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 04h",
"y": 68,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 08h",
"y": 157,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 12h",
"y": 132,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 16h",
"y": 181,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 20h",
"y": 161,
"fillColor": "#a78bfa"
},
{
"x": "Matching · 00h",
"y": 204,
"fillColor": "#f472b6"
},
{
"x": "Matching · 04h",
"y": 182,
"fillColor": "#f472b6"
},
{
"x": "Matching · 08h",
"y": 334,
"fillColor": "#f472b6"
},
{
"x": "Matching · 12h",
"y": 331,
"fillColor": "#f472b6"
},
{
"x": "Matching · 16h",
"y": 605,
"fillColor": "#f472b6"
},
{
"x": "Matching · 20h",
"y": 647,
"fillColor": "#f472b6"
},
{
"x": "Pricing · 00h",
"y": 127,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 04h",
"y": 96,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 08h",
"y": 213,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 12h",
"y": 193,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 16h",
"y": 226,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 20h",
"y": 219,
"fillColor": "#fbbf24"
},
{
"x": "Geo index · 00h",
"y": 32,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 04h",
"y": 24,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 08h",
"y": 54,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 12h",
"y": 45,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 16h",
"y": 61,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 20h",
"y": 58,
"fillColor": "#2dd4bf"
},
{
"x": "Payments · 00h",
"y": 164,
"fillColor": "#4ade80"
},
{
"x": "Payments · 04h",
"y": 141,
"fillColor": "#4ade80"
},
{
"x": "Payments · 08h",
"y": 287,
"fillColor": "#4ade80"
},
{
"x": "Payments · 12h",
"y": 244,
"fillColor": "#4ade80"
},
{
"x": "Payments · 16h",
"y": 307,
"fillColor": "#4ade80"
},
{
"x": "Payments · 20h",
"y": 300,
"fillColor": "#4ade80"
},
{
"x": "Notify · 00h",
"y": 54,
"fillColor": "#fb923c"
},
{
"x": "Notify · 04h",
"y": 42,
"fillColor": "#fb923c"
},
{
"x": "Notify · 08h",
"y": 88,
"fillColor": "#fb923c"
},
{
"x": "Notify · 12h",
"y": 67,
"fillColor": "#fb923c"
},
{
"x": "Notify · 16h",
"y": 94,
"fillColor": "#fb923c"
},
{
"x": "Notify · 20h",
"y": 92,
"fillColor": "#fb923c"
}
]
}
],
"xaxis": {
"categories": [
"Edge · 00h",
"Edge · 04h",
"Edge · 08h",
"Edge · 12h",
"Edge · 16h",
"Edge · 20h",
"Rider API · 00h",
"Rider API · 04h",
"Rider API · 08h",
"Rider API · 12h",
"Rider API · 16h",
"Rider API · 20h",
"Driver API · 00h",
"Driver API · 04h",
"Driver API · 08h",
"Driver API · 12h",
"Driver API · 16h",
"Driver API · 20h",
"Matching · 00h",
"Matching · 04h",
"Matching · 08h",
"Matching · 12h",
"Matching · 16h",
"Matching · 20h",
"Pricing · 00h",
"Pricing · 04h",
"Pricing · 08h",
"Pricing · 12h",
"Pricing · 16h",
"Pricing · 20h",
"Geo index · 00h",
"Geo index · 04h",
"Geo index · 08h",
"Geo index · 12h",
"Geo index · 16h",
"Geo index · 20h",
"Payments · 00h",
"Payments · 04h",
"Payments · 08h",
"Payments · 12h",
"Payments · 16h",
"Payments · 20h",
"Notify · 00h",
"Notify · 04h",
"Notify · 08h",
"Notify · 12h",
"Notify · 16h",
"Notify · 20h"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.7,
"hole": "40%",
"legend": {
"show": false
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 6 === 2 ? c.split(' · ')[0] : '' }
},
"aggregate": "max",
"link": {
"mode": "map",
"unit": "service-windows",
"basis": "8 services × 6 windows of 4 h"
},
"layers": [
{
"type": "matrix",
"name": "Calls",
"unit": "req/s",
"rows": [
{
"id": "edge",
"name": "Edge",
"short": "EDG",
"keys": [
"edge"
],
"link": [
0,
1,
2,
3,
4,
5
]
},
{
"id": "rider",
"name": "Rider API",
"short": "RID",
"keys": [
"rider"
],
"link": [
6,
7,
8,
9,
10,
11
]
},
{
"id": "driver",
"name": "Driver API",
"short": "DRV",
"keys": [
"driver"
],
"link": [
12,
13,
14,
15,
16,
17
]
},
{
"id": "match",
"name": "Matching",
"short": "MAT",
"keys": [
"match"
],
"link": [
18,
19,
20,
21,
22,
23
]
},
{
"id": "price",
"name": "Pricing",
"short": "PRC",
"keys": [
"price"
],
"link": [
24,
25,
26,
27,
28,
29
]
},
{
"id": "geo",
"name": "Geo index",
"short": "GEO",
"keys": [
"geo"
],
"link": [
30,
31,
32,
33,
34,
35
]
},
{
"id": "pay",
"name": "Payments",
"short": "PAY",
"keys": [
"pay"
],
"link": [
36,
37,
38,
39,
40,
41
]
},
{
"id": "notify",
"name": "Notify",
"short": "NTF",
"keys": [
"notify"
],
"link": [
42,
43,
44,
45,
46,
47
]
}
],
"data": [
[
"edge",
"rider",
1840
],
[
"edge",
"driver",
1210
],
[
"rider",
"match",
620
],
[
"driver",
"match",
540
],
[
"match",
"geo",
1480
],
[
"match",
"price",
610
],
[
"rider",
"price",
390
],
[
"price",
"geo",
280
],
[
"rider",
"pay",
210
],
[
"driver",
"pay",
95
],
[
"match",
"notify",
430
],
[
"pay",
"notify",
160
],
[
"driver",
"geo",
960
],
[
"rider",
"geo",
330
],
[
"notify",
"edge",
120
],
[
"pay",
"price",
40
],
[
"geo",
"match",
75
]
],
"color": "#818cf8"
},
{
"type": "goals",
"name": "Error budget left (30 d)",
"data": [
{
"x": "Edge",
"y": 91,
"target": 100,
"color": "#38bdf8",
"keys": [
"edge"
],
"link": [
0,
1,
2,
3,
4,
5
]
},
{
"x": "Rider API",
"y": 74,
"target": 100,
"color": "#818cf8",
"keys": [
"rider"
],
"link": [
6,
7,
8,
9,
10,
11
]
},
{
"x": "Driver API",
"y": 68,
"target": 100,
"color": "#a78bfa",
"keys": [
"driver"
],
"link": [
12,
13,
14,
15,
16,
17
]
},
{
"x": "Matching",
"y": 23,
"target": 100,
"color": "#f472b6",
"keys": [
"match"
],
"link": [
18,
19,
20,
21,
22,
23
]
},
{
"x": "Pricing",
"y": 57,
"target": 100,
"color": "#fbbf24",
"keys": [
"price"
],
"link": [
24,
25,
26,
27,
28,
29
]
},
{
"x": "Geo index",
"y": 82,
"target": 100,
"color": "#2dd4bf",
"keys": [
"geo"
],
"link": [
30,
31,
32,
33,
34,
35
]
},
{
"x": "Payments",
"y": 64,
"target": 100,
"color": "#4ade80",
"keys": [
"pay"
],
// Full configuration available through Raw or Copy.
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import premium from 'west-coast-charts/premium'
import matrixCore from 'west-coast-charts/layers/matrix-core'
WestCoastCharts.use(premium).use(matrixCore)
const WestCoastChartsPremium = premium
const WestCoastChartsLayer_matrixCore = matrixCore
WestCoastCharts.setLicenseKey(LICENCE_KEY) // paid production licence; localhost evaluation needs no key
const options = {
"chart": {
"type": "radialColumn",
"height": 640,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "p95 latency (ms)",
"data": [
{
"x": "Edge · 00h",
"y": 24,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 04h",
"y": 22,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 08h",
"y": 47,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 12h",
"y": 37,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 16h",
"y": 51,
"fillColor": "#38bdf8"
},
{
"x": "Edge · 20h",
"y": 46,
"fillColor": "#38bdf8"
},
{
"x": "Rider API · 00h",
"y": 82,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 04h",
"y": 68,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 08h",
"y": 142,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 12h",
"y": 112,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 16h",
"y": 152,
"fillColor": "#818cf8"
},
{
"x": "Rider API · 20h",
"y": 140,
"fillColor": "#818cf8"
},
{
"x": "Driver API · 00h",
"y": 88,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 04h",
"y": 68,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 08h",
"y": 157,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 12h",
"y": 132,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 16h",
"y": 181,
"fillColor": "#a78bfa"
},
{
"x": "Driver API · 20h",
"y": 161,
"fillColor": "#a78bfa"
},
{
"x": "Matching · 00h",
"y": 204,
"fillColor": "#f472b6"
},
{
"x": "Matching · 04h",
"y": 182,
"fillColor": "#f472b6"
},
{
"x": "Matching · 08h",
"y": 334,
"fillColor": "#f472b6"
},
{
"x": "Matching · 12h",
"y": 331,
"fillColor": "#f472b6"
},
{
"x": "Matching · 16h",
"y": 605,
"fillColor": "#f472b6"
},
{
"x": "Matching · 20h",
"y": 647,
"fillColor": "#f472b6"
},
{
"x": "Pricing · 00h",
"y": 127,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 04h",
"y": 96,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 08h",
"y": 213,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 12h",
"y": 193,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 16h",
"y": 226,
"fillColor": "#fbbf24"
},
{
"x": "Pricing · 20h",
"y": 219,
"fillColor": "#fbbf24"
},
{
"x": "Geo index · 00h",
"y": 32,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 04h",
"y": 24,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 08h",
"y": 54,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 12h",
"y": 45,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 16h",
"y": 61,
"fillColor": "#2dd4bf"
},
{
"x": "Geo index · 20h",
"y": 58,
"fillColor": "#2dd4bf"
},
{
"x": "Payments · 00h",
"y": 164,
"fillColor": "#4ade80"
},
{
"x": "Payments · 04h",
"y": 141,
"fillColor": "#4ade80"
},
{
"x": "Payments · 08h",
"y": 287,
"fillColor": "#4ade80"
},
{
"x": "Payments · 12h",
"y": 244,
"fillColor": "#4ade80"
},
{
"x": "Payments · 16h",
"y": 307,
"fillColor": "#4ade80"
},
{
"x": "Payments · 20h",
"y": 300,
"fillColor": "#4ade80"
},
{
"x": "Notify · 00h",
"y": 54,
"fillColor": "#fb923c"
},
{
"x": "Notify · 04h",
"y": 42,
"fillColor": "#fb923c"
},
{
"x": "Notify · 08h",
"y": 88,
"fillColor": "#fb923c"
},
{
"x": "Notify · 12h",
"y": 67,
"fillColor": "#fb923c"
},
{
"x": "Notify · 16h",
"y": 94,
"fillColor": "#fb923c"
},
{
"x": "Notify · 20h",
"y": 92,
"fillColor": "#fb923c"
}
]
}
],
"xaxis": {
"categories": [
"Edge · 00h",
"Edge · 04h",
"Edge · 08h",
"Edge · 12h",
"Edge · 16h",
"Edge · 20h",
"Rider API · 00h",
"Rider API · 04h",
"Rider API · 08h",
"Rider API · 12h",
"Rider API · 16h",
"Rider API · 20h",
"Driver API · 00h",
"Driver API · 04h",
"Driver API · 08h",
"Driver API · 12h",
"Driver API · 16h",
"Driver API · 20h",
"Matching · 00h",
"Matching · 04h",
"Matching · 08h",
"Matching · 12h",
"Matching · 16h",
"Matching · 20h",
"Pricing · 00h",
"Pricing · 04h",
"Pricing · 08h",
"Pricing · 12h",
"Pricing · 16h",
"Pricing · 20h",
"Geo index · 00h",
"Geo index · 04h",
"Geo index · 08h",
"Geo index · 12h",
"Geo index · 16h",
"Geo index · 20h",
"Payments · 00h",
"Payments · 04h",
"Payments · 08h",
"Payments · 12h",
"Payments · 16h",
"Payments · 20h",
"Notify · 00h",
"Notify · 04h",
"Notify · 08h",
"Notify · 12h",
"Notify · 16h",
"Notify · 20h"
]
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.7,
"hole": "40%",
"legend": {
"show": false
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 6 === 2 ? c.split(' · ')[0] : '' }
},
"aggregate": "max",
"link": {
"mode": "map",
"unit": "service-windows",
"basis": "8 services × 6 windows of 4 h"
},
"layers": [
{
"type": "matrix",
"name": "Calls",
"unit": "req/s",
"rows": [
{
"id": "edge",
"name": "Edge",
"short": "EDG",
"keys": [
"edge"
],
"link": [
0,
1,
2,
3,
4,
5
]
},
{
"id": "rider",
"name": "Rider API",
"short": "RID",
"keys": [
"rider"
],
"link": [
6,
7,
8,
9,
10,
11
]
},
{
"id": "driver",
"name": "Driver API",
"short": "DRV",
"keys": [
"driver"
],
"link": [
12,
13,
14,
15,
16,
17
]
},
{
"id": "match",
"name": "Matching",
"short": "MAT",
"keys": [
"match"
],
"link": [
18,
19,
20,
21,
22,
23
]
},
{
"id": "price",
"name": "Pricing",
"short": "PRC",
"keys": [
"price"
],
"link": [
24,
25,
26,
27,
28,
29
]
},
{
"id": "geo",
"name": "Geo index",
"short": "GEO",
"keys": [
"geo"
],
"link": [
30,
31,
32,
33,
34,
35
]
},
{
"id": "pay",
"name": "Payments",
"short": "PAY",
"keys": [
"pay"
],
"link": [
36,
37,
38,
39,
40,
41
]
},
{
"id": "notify",
"name": "Notify",
"short": "NTF",
"keys": [
"notify"
],
"link": [
42,
43,
44,
45,
46,
47
]
}
],
"data": [
[
"edge",
"rider",
1840
],
[
"edge",
"driver",
1210
],
[
"rider",
"match",
620
],
[
"driver",
"match",
540
],
[
"match",
"geo",
1480
],
[
"match",
"price",
610
],
[
"rider",
"price",
390
],
[
"price",
"geo",
280
],
[
"rider",
"pay",
210
],
[
"driver",
"pay",
95
],
[
"match",
"notify",
430
],
[
"pay",
"notify",
160
],
[
"driver",
"geo",
960
],
[
"rider",
"geo",
330
],
[
"notify",
"edge",
120
],
[
"pay",
"price",
40
],
[
"geo",
"match",
75
]
],
"color": "#818cf8"
},
{
"type": "goals",
"name": "Error budget left (30 d)",
"data": [
{
"x": "Edge",
"y": 91,
"target": 100,
"color": "#38bdf8",
"keys": [
"edge"
],
"link": [
0,
1,
2,
3,
4,
5
]
},
{
"x": "Rider API",
"y": 74,
"target": 100,
"color": "#818cf8",
"keys": [
"rider"
],
"link": [
6,
7,
8,
9,
10,
11
]
},
{
"x": "Driver API",
"y": 68,
"target": 100,
"color": "#a78bfa",
"keys": [
"driver"
],
"link": [
12,
13,
14,
15,
16,
17
]
},
{
"x": "Matching",
"y": 23,
"target": 100,
"color": "#f472b6",
"keys": [
"match"
],
"link": [
18,
19,
20,
21,
22,
23
]
},
{
"x": "Pricing",
"y": 57,
"target": 100,
"color": "#fbbf24",
"keys": [
"price"
],
"link": [
24,
25,
26,
27,
28,
29
]
},
{
"x": "Geo index",
"y": 82,
"target": 100,
"color": "#2dd4bf",
"keys": [
"geo"
],
"link": [
30,
31,
32,
33,
34,
35
]
},
{
"x": "Payments",
"y": 64,
"target": 100,
"color": "#4ade80",
"keys": [
"pay"
],
"link": [
36,
37,
38,
39,
40,
41
]
},
{
"x": "Notify",
"y": 96,
"target": 100,
"color": "#fb923c",
"keys": [
"notify"
],
"link": [
42,
43,
44,
45,
46,
47
]
}
],
"ringGap": 1,
"gap": 8
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.8,
"hole": "76%",
"layerGap": 3,
"categoryLabels": {
"offset": 2,
"formatter": function (c, o) { return o.index % 6 === 2 ? ['EDG', 'RID', 'DRV', 'MAT', 'PRC', 'GEO', 'PAY', 'NTF'][Math.floor(o.index / 6)] : '' }
},
"layers": [
{
"type": "matrix",
"name": "Calls",
"unit": "req/s",
"rows": [
{
"id": "edge",
"name": "Edge",
"short": "EDG",
"keys": [
"edge"
],
"link": [
0,
1,
2,
3,
4,
5
]
},
{
"id": "rider",
"name": "Rider API",
"short": "RID",
"keys": [
"rider"
],
"link": [
6,
7,
8,
9,
10,
11
]
},
{
"id": "driver",
"name": "Driver API",
"short": "DRV",
"keys": [
"driver"
],
"link": [
12,
13,
14,
15,
16,
17
]
},
{
"id": "match",
"name": "Matching",
"short": "MAT",
"keys": [
"match"
],
"link": [
18,
19,
20,
21,
22,
23
]
},
{
"id": "price",
"name": "Pricing",
"short": "PRC",
"keys": [
"price"
],
"link": [
24,
25,
26,
27,
28,
29
]
},
{
"id": "geo",
"name": "Geo index",
"short": "GEO",
"keys": [
"geo"
],
"link": [
30,
31,
32,
33,
34,
35
]
},
{
"id": "pay",
"name": "Payments",
"short": "PAY",
"keys": [
"pay"
],
"link": [
36,
37,
38,
39,
40,
41
]
},
{
"id": "notify",
"name": "Notify",
"short": "NTF",
"keys": [
"notify"
],
"link": [
42,
43,
44,
45,
46,
47
]
}
],
"data": [
[
"edge",
"rider",
1840
],
[
"edge",
"driver",
1210
],
[
"rider",
"match",
620
],
[
"driver",
"match",
540
],
[
"match",
"geo",
1480
],
[
"match",
"price",
610
],
[
"rider",
"price",
390
],
[
"price",
"geo",
280
],
[
"rider",
"pay",
210
],
[
"driver",
"pay",
95
],
[
"match",
"notify",
430
],
[
"pay",
"notify",
160
],
[
"driver",
"geo",
960
],
[
"rider",
"geo",
330
],
[
"notify",
"edge",
120
],
[
"pay",
"price",
40
],
[
"geo",
"match",
75
]
],
"color": "#818cf8"
},
{
"type": "heatmap",
"name": "Current error budget left (30 d), repeated per window",
"unit": "%",
"labels": [
"Edge · 00h",
"Edge · 04h",
"Edge · 08h",
"Edge · 12h",
"Edge · 16h",
"Edge · 20h",
"Rider API · 00h",
"Rider API · 04h",
"Rider API · 08h",
"Rider API · 12h",
"Rider API · 16h",
"Rider API · 20h",
"Driver API · 00h",
"Driver API · 04h",
"Driver API · 08h",
"Driver API · 12h",
"Driver API · 16h",
"Driver API · 20h",
"Matching · 00h",
"Matching · 04h",
"Matching · 08h",
"Matching · 12h",
"Matching · 16h",
"Matching · 20h",
"Pricing · 00h",
"Pricing · 04h",
"Pricing · 08h",
"Pricing · 12h",
"Pricing · 16h",
"Pricing · 20h",
"Geo index · 00h",
"Geo index · 04h",
"Geo index · 08h",
"Geo index · 12h",
"Geo index · 16h",
"Geo index · 20h",
"Payments · 00h",
"Payments · 04h",
"Payments · 08h",
"Payments · 12h",
"Payments · 16h",
"Payments · 20h",
"Notify · 00h",
"Notify · 04h",
"Notify · 08h",
"Notify · 12h",
"Notify · 16h",
"Notify · 20h"
],
"data": [
{
"name": "Current budget by service",
"data": [
91,
91,
91,
91,
91,
91,
74,
74,
74,
74,
74,
74,
68,
68,
68,
68,
68,
68,
23,
23,
23,
23,
23,
23,
57,
57,
57,
57,
57,
57,
82,
82,
82,
82,
82,
82,
64,
64,
64,
64,
64,
64,
96,
96,
96,
96,
96,
96
]
}
],
"colors": [
"#ef4444",
"#fbbf24",
"#22c55e"
],
"thickness": "auto",
"gap": 2,
"padding": 0,
"ringGap": 0,
"link": {
"mode": "angle"
}
}
]
}
}
}
}
]
}
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-matrix-mesh.json --out radial-column-matrix-mesh.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/matrix-mesh/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?