Team goals: seven rings inside a month of output
Activity-style goal rings, one per team (any number; thickness and gaps adapt to the space). Past 100 % a ring laps over itself, the end cap casts a soft shadow. Outside: work items shipped per day. Hover a ring to light the days that team hit its daily target; hover a day to see which teams did. Compact layout keeps all seven teams and all thirty days, puts the complete goal legend below the dial and uses a smaller empty centre.
Time rings & goals
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": 600,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Items shipped",
"data": [
46,
61,
68,
53,
45,
13,
9,
52,
67,
63,
59,
40,
8,
15,
47,
62,
69,
54,
45,
14,
10,
54,
57,
63,
59,
40,
9,
17,
49,
64
]
}
],
"xaxis": {
"categories": [
"Oct 1",
"Oct 2",
"Oct 3",
"Oct 4",
"Oct 5",
"Oct 6",
"Oct 7",
"Oct 8",
"Oct 9",
"Oct 10",
"Oct 11",
"Oct 12",
"Oct 13",
"Oct 14",
"Oct 15",
"Oct 16",
"Oct 17",
"Oct 18",
"Oct 19",
"Oct 20",
"Oct 21",
"Oct 22",
"Oct 23",
"Oct 24",
"Oct 25",
"Oct 26",
"Oct 27",
"Oct 28",
"Oct 29",
"Oct 30"
]
},
"colors": [
"#94a3b8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.64,
"center": {
"show": false
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 5 === 0 ? c : '' }
},
"link": {
"mode": "map",
"unit": "days"
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
]
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.82,
"hole": "12%",
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
],
"thickness": "auto",
"gap": 2,
"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": 600,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Items shipped",
"data": [
46,
61,
68,
53,
45,
13,
9,
52,
67,
63,
59,
40,
8,
15,
47,
62,
69,
54,
45,
14,
10,
54,
57,
63,
59,
40,
9,
17,
49,
64
]
}
],
"xaxis": {
"categories": [
"Oct 1",
"Oct 2",
"Oct 3",
"Oct 4",
"Oct 5",
"Oct 6",
"Oct 7",
"Oct 8",
"Oct 9",
"Oct 10",
"Oct 11",
"Oct 12",
"Oct 13",
"Oct 14",
"Oct 15",
"Oct 16",
"Oct 17",
"Oct 18",
"Oct 19",
"Oct 20",
"Oct 21",
"Oct 22",
"Oct 23",
"Oct 24",
"Oct 25",
"Oct 26",
"Oct 27",
"Oct 28",
"Oct 29",
"Oct 30"
]
},
"colors": [
"#94a3b8"
],
"plotOptions": {
"radialColumn": {
"innerRadius": 0.64,
"center": {
"show": false
},
"categoryLabels": {
"step": 1,
"orientation": "horizontal",
"formatter": function (c, o) { return o.index % 5 === 0 ? c : '' }
},
"link": {
"mode": "map",
"unit": "days"
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
]
}
]
}
},
"responsive": [
{
"breakpoint": 600,
"options": {
"chart": {
"fontSize": 11,
"height": 720
},
"plotOptions": {
"radialColumn": {
"innerRadius": 0.82,
"hole": "12%",
"layerGap": 3,
"legend": {
"position": "bottom"
},
"categoryLabels": {
"offset": 2
},
"layers": [
{
"type": "goals",
"name": "Monthly goal",
"data": [
{
"x": "Design",
"y": 82,
"target": 100,
"color": "#f472b6",
"link": [
0,
1,
4,
7,
10,
11,
14,
17,
20,
21,
24,
27
],
"label": "Design"
},
{
"x": "Frontend",
"y": 118,
"target": 100,
"color": "#38bdf8",
"link": [
2,
4,
7,
9,
12,
14,
17,
19,
22,
24,
27,
29
],
"label": "Frontend"
},
{
"x": "Backend",
"y": 91,
"target": 100,
"color": "#818cf8",
"link": [
0,
2,
4,
6,
8,
10,
12,
14,
16,
18,
20,
22,
24,
26,
28
],
"label": "Backend"
},
{
"x": "QA",
"y": 142,
"target": 100,
"color": "#34d399",
"link": [
0,
1,
3,
5,
6,
8,
10,
11,
13,
15,
16,
18,
20,
21,
23,
25,
26,
28
],
"label": "QA"
},
{
"x": "Docs",
"y": 47,
"target": 100,
"color": "#fbbf24",
"link": [
0,
3,
10,
13,
20,
23
],
"label": "Docs"
},
{
"x": "Support",
"y": 76,
"target": 100,
"color": "#fb923c",
"link": [
1,
2,
6,
7,
11,
12,
16,
17,
21,
22,
26,
27
],
"label": "Support"
},
{
"x": "Sales",
"y": 212,
"target": 100,
"color": "#a78bfa",
"link": [
0,
2,
3,
4,
5,
6,
7,
8,
9,
10,
12,
13,
14,
15,
16,
17,
18,
19,
20,
22,
23,
24,
25,
26,
27,
28,
29
],
"label": "Sales"
}
],
"thickness": "auto",
"gap": 2,
"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-goals-team.json --out radial-column-goals-team.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/goals-team/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?