# Matrix core: service calls inside error budgets and latency (Radial Column example) > WestCoast Charts 1.1.5, release, public Core release, on npm. HTML: https://westcoast-charts.com/gallery/radial-column/matrix-mesh/ · Index for agents: https://westcoast-charts.com/llms.txt The centre is a call matrix (row calls column, req/s); around it the error budget left per service; outside the p95 latency per service in 4-hour windows. Every layer is keyed by service. Hover a cell to light both services in each ring and the reverse call; hover a header to light its whole row or column. Arrow keys move through the grid. The story: Matching is hot in the evening and has burnt most of its budget. Below 600 px, all eight current error budgets become one service-aligned heat band, each percentage repeated unchanged over that service's six windows (not a time series). The full 8 × 8 calls matrix and all 48 latency windows remain. EDG/RID/DRV/MAT/PRC/GEO/PAY/NTF abbreviate the same full service names in tooltips and matrix headers. ## Question Which service relationships coincide with high latency and a depleted error budget? ## How to read it - 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: Hover Matching → Geo index to compare the call and its reverse, and follow both services into the surrounding rings. Arrow keys move through the matrix. - Chart type: `radialColumn` (Radial Column) - Collection: Radial Column · Radial Column · Control rooms - Raw configuration: https://westcoast-charts.com/gallery-src/radial-column/matrix-mesh.js - Standalone example: https://westcoast-charts.com/embed/samples/wcc/premium/radial-column.html?only=matrix-mesh ## Setup ```js 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 ``` ## Options ```js 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() ``` ## 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-matrix-mesh.json --out radial-column-matrix-mesh.svg --with-table` (save the options above as JSON first)