Service mesh: calls, ownership and cost in one ring
Three stacked layers, all aligned to the same twelve services. Innermost: a chord of service-to-service calls (k req/min). Middle: Team › Service sunburst. Outer: monthly cost per service, coloured by error rate. Hover anything: a call lights both services through every layer. Compact layout retains all twelve services, every call and both ownership depths; the chord arc has a deliberate 10 px width.
Chord inside
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": 620,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Cost ($/mo)",
"data": [
{
"x": "auth",
"y": 402,
"meta": {
"err": 1
}
},
{
"x": "users",
"y": 381,
"meta": {
"err": 0.6
}
},
{
"x": "sessions",
"y": 455,
"meta": {
"err": 0.6
}
},
{
"x": "cart",
"y": 262,
"meta": {
"err": 1.6
}
},
{
"x": "checkout",
"y": 305,
"meta": {
"err": 1
}
},
{
"x": "pricing",
"y": 121,
"meta": {
"err": 4.1
}
},
{
"x": "orders",
"y": 362,
"meta": {
"err": 1.7
}
},
{
"x": "search",
"y": 388,
"meta": {
"err": 1.6
}
},
{
"x": "catalog",
"y": 191,
"meta": {
"err": 1.7
}
},
{
"x": "media",
"y": 335,
"meta": {
"err": 1.3
}
},
{
"x": "notify",
"y": 221,
"meta": {
"err": 0.6
}
},
{
"x": "billing-sync",
"y": 199,
"meta": {
"err": 1.1
}
}
]
}
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.66,
"legend": {
"show": false
},
"center": {
"label": "Monthly cost"
},
"encode": {
"angle": "Service",
"color": {
"field": "err",
"name": "Error rate",
"unit": "%"
}
},
"link": {
"mode": "category",
"align": true,
"unit": "services"
},
"layers": [
{
"type": "chord",
"name": "Calls",
"data": [
[
"checkout",
"cart",
38
],
[
"checkout",
"pricing",
31
],
[
"checkout",
"orders",
27
],
[
"checkout",
"auth",
22
],
[
"cart",
"pricing",
19
],
[
"cart",
"catalog",
24
],
[
"orders",
"notify",
16
],
[
"orders",
"billing-sync",
12
],
[
"search",
"catalog",
41
],
[
"catalog",
"media",
18
],
[
"users",
"sessions",
14
],
[
"auth",
"sessions",
26
],
[
"auth",
"users",
20
],
[
"pricing",
"catalog",
15
],
[
"notify",
"users",
9
],
[
"search",
"auth",
7
],
[
"media",
"auth",
5
],
[
"billing-sync",
"users",
6
]
],
"directed": true,
"groups": [
{
"id": "auth",
"color": "#818cf8"
},
{
"id": "users",
"color": "#818cf8"
},
{
"id": "sessions",
"color": "#818cf8"
},
{
"id": "cart",
"color": "#2dd4bf"
},
{
"id": "checkout",
"color": "#2dd4bf"
},
{
"id": "pricing",
"color": "#2dd4bf"
},
{
"id": "orders",
"color": "#2dd4bf"
},
{
"id": "search",
"color": "#f59e0b"
},
{
"id": "catalog",
"color": "#f59e0b"
},
{
"id": "media",
"color": "#f59e0b"
},
{
"id": "notify",
"color": "#f472b6"
},
{
"id": "billing-sync",
"color": "#f472b6"
}
],
"ringWidth": 12,
"padding": 2,
"gap": 6
},
{
"type": "sunburst",
"name": "Team › Service",
"data": [
{
"x": "Identity",
"color": "#818cf8",
"children": [
{
"x": "auth",
"y": 402
},
{
"x": "users",
"y": 381
},
{
"x": "sessions",
"y": 455
}
]
},
{
"x": "Commerce",
"color": "#2dd4bf",
"children": [
{
"x": "cart",
"y": 262
},
{
"x": "checkout",
"y": 305
},
{
"x": "pricing",
"y": 121
},
{
"x": "orders",
"y": 362
}
]
},
{
"x": "Content",
"color": "#f59e0b",
"children": [
{
"x": "search",
"y": 388
},
{
"x": "catalog",
"y": 191
},
{
"x": "media",
"y": 335
}
]
},
{
"x": "Ops",
"color": "#f472b6",
"children": [
{
"x": "notify",
"y": 221
},
{
"x": "billing-sync",
"y": 199
}
]
}
],
"padding": 1.5,
"thickness": 58
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.8,
"hole": 0,
"layerGap": 3,
"layers": [
{
"type": "chord",
"name": "Calls",
"data": [
[
"checkout",
"cart",
38
],
[
"checkout",
"pricing",
31
],
[
"checkout",
"orders",
27
],
[
"checkout",
"auth",
22
],
[
"cart",
"pricing",
19
],
[
"cart",
"catalog",
24
],
[
"orders",
"notify",
16
],
[
"orders",
"billing-sync",
12
],
[
"search",
"catalog",
41
],
[
"catalog",
"media",
18
],
[
"users",
"sessions",
14
],
[
"auth",
"sessions",
26
],
[
"auth",
"users",
20
],
[
"pricing",
"catalog",
15
],
[
"notify",
"users",
9
],
[
"search",
"auth",
7
],
[
"media",
"auth",
5
],
[
"billing-sync",
"users",
6
]
],
"directed": true,
"groups": [
{
"id": "auth",
"color": "#818cf8"
},
{
"id": "users",
"color": "#818cf8"
},
{
"id": "sessions",
"color": "#818cf8"
},
{
"id": "cart",
"color": "#2dd4bf"
},
{
"id": "checkout",
"color": "#2dd4bf"
},
{
"id": "pricing",
"color": "#2dd4bf"
},
{
"id": "orders",
"color": "#2dd4bf"
},
{
"id": "search",
"color": "#f59e0b"
},
{
"id": "catalog",
"color": "#f59e0b"
},
{
"id": "media",
"color": "#f59e0b"
},
{
"id": "notify",
"color": "#f472b6"
},
{
"id": "billing-sync",
"color": "#f472b6"
}
],
"ringWidth": 10,
"padding": 2,
"gap": 3
},
{
"type": "sunburst",
"name": "Team › Service",
"data": [
{
"x": "Identity",
"color": "#818cf8",
"children": [
{
"x": "auth",
"y": 402
},
{
"x": "users",
"y": 381
},
{
"x": "sessions",
"y": 455
}
]
},
{
"x": "Commerce",
"color": "#2dd4bf",
"children": [
{
"x": "cart",
"y": 262
},
{
"x": "checkout",
"y": 305
},
{
"x": "pricing",
"y": 121
},
{
"x": "orders",
"y": 362
}
]
},
{
"x": "Content",
"color": "#f59e0b",
"children": [
{
"x": "search",
"y": 388
},
{
"x": "catalog",
"y": 191
},
{
"x": "media",
"y": 335
}
]
},
{
"x": "Ops",
"color": "#f472b6",
"children": [
{
"x": "notify",
"y": 221
},
{
"x": "billing-sync",
"y": 199
}
]
}
],
"padding": 1.5,
"thickness": 32,
"ringGap": 1
}
]
}
}
}
}
]
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()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
const options = {
"chart": {
"type": "radialColumn",
"height": 620,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Cost ($/mo)",
"data": [
{
"x": "auth",
"y": 402,
"meta": {
"err": 1
}
},
{
"x": "users",
"y": 381,
"meta": {
"err": 0.6
}
},
{
"x": "sessions",
"y": 455,
"meta": {
"err": 0.6
}
},
{
"x": "cart",
"y": 262,
"meta": {
"err": 1.6
}
},
{
"x": "checkout",
"y": 305,
"meta": {
"err": 1
}
},
{
"x": "pricing",
"y": 121,
"meta": {
"err": 4.1
}
},
{
"x": "orders",
"y": 362,
"meta": {
"err": 1.7
}
},
{
"x": "search",
"y": 388,
"meta": {
"err": 1.6
}
},
{
"x": "catalog",
"y": 191,
"meta": {
"err": 1.7
}
},
{
"x": "media",
"y": 335,
"meta": {
"err": 1.3
}
},
{
"x": "notify",
"y": 221,
"meta": {
"err": 0.6
}
},
{
"x": "billing-sync",
"y": 199,
"meta": {
"err": 1.1
}
}
]
}
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.66,
"legend": {
"show": false
},
"center": {
"label": "Monthly cost"
},
"encode": {
"angle": "Service",
"color": {
"field": "err",
"name": "Error rate",
"unit": "%"
}
},
"link": {
"mode": "category",
"align": true,
"unit": "services"
},
"layers": [
{
"type": "chord",
"name": "Calls",
"data": [
[
"checkout",
"cart",
38
],
[
"checkout",
"pricing",
31
],
[
"checkout",
"orders",
27
],
[
"checkout",
"auth",
22
],
[
"cart",
"pricing",
19
],
[
"cart",
"catalog",
24
],
[
"orders",
"notify",
16
],
[
"orders",
"billing-sync",
12
],
[
"search",
"catalog",
41
],
[
"catalog",
"media",
18
],
[
"users",
"sessions",
14
],
[
"auth",
"sessions",
26
],
[
"auth",
"users",
20
],
[
"pricing",
"catalog",
15
],
[
"notify",
"users",
9
],
[
"search",
"auth",
7
],
[
"media",
"auth",
5
],
[
"billing-sync",
"users",
6
]
],
"directed": true,
"groups": [
{
"id": "auth",
"color": "#818cf8"
},
{
"id": "users",
"color": "#818cf8"
},
{
"id": "sessions",
"color": "#818cf8"
},
{
"id": "cart",
"color": "#2dd4bf"
},
{
"id": "checkout",
"color": "#2dd4bf"
},
{
"id": "pricing",
"color": "#2dd4bf"
},
{
"id": "orders",
"color": "#2dd4bf"
},
{
"id": "search",
"color": "#f59e0b"
},
{
"id": "catalog",
"color": "#f59e0b"
},
{
"id": "media",
"color": "#f59e0b"
},
{
"id": "notify",
"color": "#f472b6"
},
{
"id": "billing-sync",
"color": "#f472b6"
}
],
"ringWidth": 12,
"padding": 2,
"gap": 6
},
{
"type": "sunburst",
"name": "Team › Service",
"data": [
{
"x": "Identity",
"color": "#818cf8",
"children": [
{
"x": "auth",
"y": 402
},
{
"x": "users",
"y": 381
},
{
"x": "sessions",
"y": 455
}
]
},
{
"x": "Commerce",
"color": "#2dd4bf",
"children": [
{
"x": "cart",
"y": 262
},
{
"x": "checkout",
"y": 305
},
{
"x": "pricing",
"y": 121
},
{
"x": "orders",
"y": 362
}
]
},
{
"x": "Content",
"color": "#f59e0b",
"children": [
{
"x": "search",
"y": 388
},
{
"x": "catalog",
"y": 191
},
{
"x": "media",
"y": 335
}
]
},
{
"x": "Ops",
"color": "#f472b6",
"children": [
{
"x": "notify",
"y": 221
},
{
"x": "billing-sync",
"y": 199
}
]
}
],
"padding": 1.5,
"thickness": 58
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.8,
"hole": 0,
"layerGap": 3,
"layers": [
{
"type": "chord",
"name": "Calls",
"data": [
[
"checkout",
"cart",
38
],
[
"checkout",
"pricing",
31
],
[
"checkout",
"orders",
27
],
[
"checkout",
"auth",
22
],
[
"cart",
"pricing",
19
],
[
"cart",
"catalog",
24
],
[
"orders",
"notify",
16
],
[
"orders",
"billing-sync",
12
],
[
"search",
"catalog",
41
],
[
"catalog",
"media",
18
],
[
"users",
"sessions",
14
],
[
"auth",
"sessions",
26
],
[
"auth",
"users",
20
],
[
"pricing",
"catalog",
15
],
[
"notify",
"users",
9
],
[
"search",
"auth",
7
],
[
"media",
"auth",
5
],
[
"billing-sync",
"users",
6
]
],
"directed": true,
"groups": [
{
"id": "auth",
"color": "#818cf8"
},
{
"id": "users",
"color": "#818cf8"
},
{
"id": "sessions",
"color": "#818cf8"
},
{
"id": "cart",
"color": "#2dd4bf"
},
{
"id": "checkout",
"color": "#2dd4bf"
},
{
"id": "pricing",
"color": "#2dd4bf"
},
{
"id": "orders",
"color": "#2dd4bf"
},
{
"id": "search",
"color": "#f59e0b"
},
{
"id": "catalog",
"color": "#f59e0b"
},
{
"id": "media",
"color": "#f59e0b"
},
{
"id": "notify",
"color": "#f472b6"
},
{
"id": "billing-sync",
"color": "#f472b6"
}
],
"ringWidth": 10,
"padding": 2,
"gap": 3
},
{
"type": "sunburst",
"name": "Team › Service",
"data": [
{
"x": "Identity",
"color": "#818cf8",
"children": [
{
"x": "auth",
"y": 402
},
{
"x": "users",
"y": 381
},
{
"x": "sessions",
"y": 455
}
]
},
{
"x": "Commerce",
"color": "#2dd4bf",
"children": [
{
"x": "cart",
"y": 262
},
{
"x": "checkout",
"y": 305
},
{
"x": "pricing",
"y": 121
},
{
"x": "orders",
"y": 362
}
]
},
{
"x": "Content",
"color": "#f59e0b",
"children": [
{
"x": "search",
"y": 388
},
{
"x": "catalog",
"y": 191
},
{
"x": "media",
"y": 335
}
]
},
{
"x": "Ops",
"color": "#f472b6",
"children": [
{
"x": "notify",
"y": 221
},
{
"x": "billing-sync",
"y": 199
}
]
}
],
"padding": 1.5,
"thickness": 32,
"ringGap": 1
}
]
}
}
}
}
]
}
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-chord-mesh.json --out radial-column-chord-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/chord-mesh/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?