Ticket handoffs between teams, agents around
Inner chord = tickets handed from one team to another this week (gradient from sender to receiver); outer bars = tickets closed per agent, with the rim band showing change vs last week. Click a team to keep it selected; Esc clears.
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": 580,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Closed tickets",
"data": [
{
"x": "Ana",
"y": 55,
"fillColor": "#60a5fa",
"meta": {
"wow": 0
}
},
{
"x": "Ben",
"y": 40,
"fillColor": "#60a5fa",
"meta": {
"wow": -5
}
},
{
"x": "Chloé",
"y": 37,
"fillColor": "#60a5fa",
"meta": {
"wow": -2
}
},
{
"x": "Dev",
"y": 40,
"fillColor": "#2dd4bf",
"meta": {
"wow": 0
}
},
{
"x": "Emil",
"y": 43,
"fillColor": "#2dd4bf",
"meta": {
"wow": 17
}
},
{
"x": "Farah",
"y": 25,
"fillColor": "#2dd4bf",
"meta": {
"wow": 15
}
},
{
"x": "Gus",
"y": 33,
"fillColor": "#fbbf24",
"meta": {
"wow": 0
}
},
{
"x": "Hana",
"y": 26,
"fillColor": "#fbbf24",
"meta": {
"wow": -12
}
},
{
"x": "Ivo",
"y": 48,
"fillColor": "#fbbf24",
"meta": {
"wow": -6
}
},
{
"x": "Jules",
"y": 47,
"fillColor": "#f87171",
"meta": {
"wow": -9
}
},
{
"x": "Kemal",
"y": 34,
"fillColor": "#f87171",
"meta": {
"wow": 7
}
},
{
"x": "Lea",
"y": 26,
"fillColor": "#f87171",
"meta": {
"wow": 19
}
},
{
"x": "Mats",
"y": 54,
"fillColor": "#a78bfa",
"meta": {
"wow": 18
}
},
{
"x": "Nia",
"y": 45,
"fillColor": "#a78bfa",
"meta": {
"wow": 18
}
},
{
"x": "Oskar",
"y": 42,
"fillColor": "#a78bfa",
"meta": {
"wow": -4
}
},
{
"x": "Priya",
"y": 31,
"fillColor": "#f472b6",
"meta": {
"wow": -5
}
},
{
"x": "Quinn",
"y": 24,
"fillColor": "#f472b6",
"meta": {
"wow": -14
}
},
{
"x": "Rosa",
"y": 38,
"fillColor": "#f472b6",
"meta": {
"wow": -6
}
}
]
}
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.7,
"center": {
"label": "Tickets closed"
},
"encode": {
"angle": "Agent",
"delta": {
"field": "wow",
"name": "vs last week",
"unit": "%",
"style": "band"
}
},
"link": {
"mode": "map",
"align": true,
"unit": "agents"
},
"layers": [
{
"type": "chord",
"name": "Handoffs",
"data": [
[
"Billing",
"Payments",
18
],
[
"Payments",
"Billing",
11
],
[
"Onboarding",
"Platform",
14
],
[
"Platform",
"Onboarding",
4
],
[
"Mobile",
"Platform",
21
],
[
"Platform",
"Mobile",
9
],
[
"Billing",
"Trust & Safety",
6
],
[
"Trust & Safety",
"Payments",
12
],
[
"Payments",
"Platform",
7
],
[
"Onboarding",
"Billing",
10
],
[
"Mobile",
"Onboarding",
5
],
[
"Trust & Safety",
"Mobile",
3
],
[
"Platform",
"Payments",
8
],
[
"Billing",
"Onboarding",
4
]
],
"groups": [
{
"id": "Billing",
"color": "#60a5fa",
"link": [
0,
1,
2
]
},
{
"id": "Onboarding",
"color": "#2dd4bf",
"link": [
3,
4,
5
]
},
{
"id": "Platform",
"color": "#fbbf24",
"link": [
6,
7,
8
]
},
{
"id": "Mobile",
"color": "#f87171",
"link": [
9,
10,
11
]
},
{
"id": "Payments",
"color": "#a78bfa",
"link": [
12,
13,
14
]
},
{
"id": "Trust & Safety",
"color": "#f472b6",
"link": [
15,
16,
17
]
}
],
"ringWidth": 12,
"padding": 3,
"ribbon": {
"colorMode": "gradient",
"opacity": 0.66
}
}
]
}
}
}
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": 580,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Closed tickets",
"data": [
{
"x": "Ana",
"y": 55,
"fillColor": "#60a5fa",
"meta": {
"wow": 0
}
},
{
"x": "Ben",
"y": 40,
"fillColor": "#60a5fa",
"meta": {
"wow": -5
}
},
{
"x": "Chloé",
"y": 37,
"fillColor": "#60a5fa",
"meta": {
"wow": -2
}
},
{
"x": "Dev",
"y": 40,
"fillColor": "#2dd4bf",
"meta": {
"wow": 0
}
},
{
"x": "Emil",
"y": 43,
"fillColor": "#2dd4bf",
"meta": {
"wow": 17
}
},
{
"x": "Farah",
"y": 25,
"fillColor": "#2dd4bf",
"meta": {
"wow": 15
}
},
{
"x": "Gus",
"y": 33,
"fillColor": "#fbbf24",
"meta": {
"wow": 0
}
},
{
"x": "Hana",
"y": 26,
"fillColor": "#fbbf24",
"meta": {
"wow": -12
}
},
{
"x": "Ivo",
"y": 48,
"fillColor": "#fbbf24",
"meta": {
"wow": -6
}
},
{
"x": "Jules",
"y": 47,
"fillColor": "#f87171",
"meta": {
"wow": -9
}
},
{
"x": "Kemal",
"y": 34,
"fillColor": "#f87171",
"meta": {
"wow": 7
}
},
{
"x": "Lea",
"y": 26,
"fillColor": "#f87171",
"meta": {
"wow": 19
}
},
{
"x": "Mats",
"y": 54,
"fillColor": "#a78bfa",
"meta": {
"wow": 18
}
},
{
"x": "Nia",
"y": 45,
"fillColor": "#a78bfa",
"meta": {
"wow": 18
}
},
{
"x": "Oskar",
"y": 42,
"fillColor": "#a78bfa",
"meta": {
"wow": -4
}
},
{
"x": "Priya",
"y": 31,
"fillColor": "#f472b6",
"meta": {
"wow": -5
}
},
{
"x": "Quinn",
"y": 24,
"fillColor": "#f472b6",
"meta": {
"wow": -14
}
},
{
"x": "Rosa",
"y": 38,
"fillColor": "#f472b6",
"meta": {
"wow": -6
}
}
]
}
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.7,
"center": {
"label": "Tickets closed"
},
"encode": {
"angle": "Agent",
"delta": {
"field": "wow",
"name": "vs last week",
"unit": "%",
"style": "band"
}
},
"link": {
"mode": "map",
"align": true,
"unit": "agents"
},
"layers": [
{
"type": "chord",
"name": "Handoffs",
"data": [
[
"Billing",
"Payments",
18
],
[
"Payments",
"Billing",
11
],
[
"Onboarding",
"Platform",
14
],
[
"Platform",
"Onboarding",
4
],
[
"Mobile",
"Platform",
21
],
[
"Platform",
"Mobile",
9
],
[
"Billing",
"Trust & Safety",
6
],
[
"Trust & Safety",
"Payments",
12
],
[
"Payments",
"Platform",
7
],
[
"Onboarding",
"Billing",
10
],
[
"Mobile",
"Onboarding",
5
],
[
"Trust & Safety",
"Mobile",
3
],
[
"Platform",
"Payments",
8
],
[
"Billing",
"Onboarding",
4
]
],
"groups": [
{
"id": "Billing",
"color": "#60a5fa",
"link": [
0,
1,
2
]
},
{
"id": "Onboarding",
"color": "#2dd4bf",
"link": [
3,
4,
5
]
},
{
"id": "Platform",
"color": "#fbbf24",
"link": [
6,
7,
8
]
},
{
"id": "Mobile",
"color": "#f87171",
"link": [
9,
10,
11
]
},
{
"id": "Payments",
"color": "#a78bfa",
"link": [
12,
13,
14
]
},
{
"id": "Trust & Safety",
"color": "#f472b6",
"link": [
15,
16,
17
]
}
],
"ringWidth": 12,
"padding": 3,
"ribbon": {
"colorMode": "gradient",
"opacity": 0.66
}
}
]
}
}
}
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-handoffs.json --out radial-column-chord-handoffs.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-handoffs/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?