Live update (360 bars)
360 bars and a donut that update every 1.2 s; bars and segments morph from what is on screen.
Series, gauge & live
Open the chart without page chrome ↗Drawing width at least 760 px. Scroll within the chart on smaller screens.
// First chart on this page. The example combines several charts or controls;
// open the standalone example for the full source.
const options = {
"chart": {
"type": "radialColumn",
"height": 520,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Signal",
"data": [
47,
42,
36,
32,
31,
28,
31,
33,
32,
33,
32,
32,
35,
37,
32,
34,
38,
40,
38,
37,
34,
34,
34,
33,
35,
36,
42,
44,
45,
50,
54,
50,
50,
54,
57,
57,
60,
59,
57,
60,
61,
62,
62,
64,
66,
65,
66,
68,
73,
73,
75,
74,
76,
81,
83,
83,
83,
81,
82,
87,
90,
92,
94,
95,
95,
92,
89,
93,
92,
92,
92,
95,
95,
93,
92,
87,
84,
85,
83,
85,
82,
85,
86,
86,
84,
81,
78,
81,
78,
74,
73,
68,
65,
66,
63,
63,
64,
63,
57,
58,
54,
53,
52,
48,
45,
47,
45,
44,
41,
44,
40,
42,
40,
41,
43,
38,
40,
41,
35,
33,
34,
37,
32,
34,
34,
29,
30,
33,
34,
32,
29,
26,
26,
28,
33,
33,
31,
32,
32,
34,
37,
35,
38,
40,
45,
41,
40,
42,
44,
46,
48,
48,
50,
53,
51,
53,
58,
60,
61,
60,
63,
68,
65,
68,
69,
72,
73,
77,
76,
74,
75,
79,
77,
76,
75,
81,
80,
83,
84,
85,
82,
85,
86,
87,
85,
84,
87,
90,
94,
94,
94,
89,
86,
89,
84,
86,
84,
87,
89,
90,
89,
87,
86,
86,
81,
80,
77,
77,
77,
72,
71,
68,
69,
71,
68,
67,
68,
66,
61,
61,
57,
58,
57,
51,
48,
46,
42,
41,
45,
42,
40,
39,
40,
38,
37,
37,
33,
34,
31,
27,
25,
26,
26,
31,
27,
31,
31,
30,
27,
25,
29,
28,
25,
24,
24,
27,
28,
31,
31,
31,
30,
31,
37,
41,
40,
45,
41,
43,
41,
41,
42,
47,
49,
51,
54,
53,
56,
54,
55,
56,
63,
60,
62,
65,
65,
65,
72,
70,
73,
79,
76,
75,
79,
79,
85,
86,
83,
81,
80,
82,
82,
85,
85,
90,
93,
92,
92,
92,
91,
93,
91,
90,
88,
86,
85,
82,
87,
90,
92,
88,
90,
86,
84,
82,
83,
80,
76,
73,
72,
70,
71,
69,
72,
69,
67,
61,
64,
63,
61,
60,
58,
59,
59,
58,
51,
49,
45,
43,
41,
41,
44,
41,
39,
35,
32,
36,
36,
39,
34,
31
]
},
{
"name": "Share",
"data": [
40,
35,
25
]
}
],
"xaxis": {
"categories": [
"0°",
"1°",
"2°",
"3°",
"4°",
"5°",
"6°",
"7°",
"8°",
"9°",
"10°",
"11°",
"12°",
"13°",
"14°",
"15°",
"16°",
"17°",
"18°",
"19°",
"20°",
"21°",
"22°",
"23°",
"24°",
"25°",
"26°",
"27°",
"28°",
"29°",
"30°",
"31°",
"32°",
"33°",
"34°",
"35°",
"36°",
"37°",
"38°",
"39°",
"40°",
"41°",
"42°",
"43°",
"44°",
"45°",
"46°",
"47°",
"48°",
"49°",
"50°",
"51°",
"52°",
"53°",
"54°",
"55°",
"56°",
"57°",
"58°",
"59°",
"60°",
"61°",
"62°",
"63°",
"64°",
"65°",
"66°",
"67°",
"68°",
"69°",
"70°",
"71°",
"72°",
"73°",
"74°",
"75°",
"76°",
"77°",
"78°",
"79°",
"80°",
"81°",
"82°",
"83°",
"84°",
"85°",
"86°",
"87°",
"88°",
"89°",
"90°",
"91°",
"92°",
"93°",
"94°",
"95°",
"96°",
"97°",
"98°",
"99°",
"100°",
"101°",
"102°",
"103°",
"104°",
"105°",
"106°",
"107°",
"108°",
"109°",
"110°",
"111°",
"112°",
"113°",
"114°",
"115°",
"116°",
"117°",
"118°",
"119°",
"120°",
"121°",
"122°",
"123°",
"124°",
"125°",
"126°",
"127°",
"128°",
"129°",
"130°",
"131°",
"132°",
"133°",
"134°",
"135°",
"136°",
"137°",
"138°",
"139°",
"140°",
"141°",
"142°",
"143°",
"144°",
"145°",
"146°",
"147°",
"148°",
"149°",
"150°",
"151°",
"152°",
"153°",
"154°",
"155°",
"156°",
"157°",
"158°",
"159°",
"160°",
"161°",
"162°",
"163°",
"164°",
"165°",
"166°",
"167°",
"168°",
"169°",
"170°",
"171°",
"172°",
"173°",
"174°",
"175°",
"176°",
"177°",
"178°",
"179°",
"180°",
"181°",
"182°",
"183°",
"184°",
"185°",
"186°",
"187°",
"188°",
"189°",
"190°",
"191°",
"192°",
"193°",
"194°",
"195°",
"196°",
"197°",
"198°",
"199°",
"200°",
"201°",
"202°",
"203°",
"204°",
"205°",
"206°",
"207°",
"208°",
"209°",
"210°",
"211°",
"212°",
"213°",
"214°",
"215°",
"216°",
"217°",
"218°",
"219°",
"220°",
"221°",
"222°",
"223°",
"224°",
"225°",
"226°",
"227°",
"228°",
"229°",
"230°",
"231°",
"232°",
"233°",
"234°",
"235°",
"236°",
"237°",
"238°",
"239°",
"240°",
"241°",
"242°",
"243°",
"244°",
"245°",
"246°",
"247°",
"248°",
"249°",
"250°",
"251°",
"252°",
"253°",
"254°",
"255°",
"256°",
"257°",
"258°",
"259°",
"260°",
"261°",
"262°",
"263°",
"264°",
"265°",
"266°",
"267°",
"268°",
"269°",
"270°",
"271°",
"272°",
"273°",
"274°",
"275°",
"276°",
"277°",
"278°",
"279°",
"280°",
"281°",
"282°",
"283°",
"284°",
"285°",
"286°",
"287°",
"288°",
"289°",
"290°",
"291°",
"292°",
"293°",
"294°",
"295°",
"296°",
"297°",
"298°",
"299°",
"300°",
"301°",
"302°",
"303°",
"304°",
"305°",
"306°",
"307°",
"308°",
"309°",
"310°",
"311°",
"312°",
"313°",
"314°",
"315°",
"316°",
"317°",
"318°",
"319°",
"320°",
"321°",
"322°",
"323°",
"324°",
"325°",
"326°",
"327°",
"328°",
"329°",
"330°",
"331°",
"332°",
"333°",
"334°",
"335°",
"336°",
"337°",
"338°",
"339°",
"340°",
"341°",
"342°",
"343°",
"344°",
"345°",
"346°",
"347°",
"348°",
"349°",
"350°",
"351°",
"352°",
"353°",
"354°",
"355°",
"356°",
"357°",
"358°",
"359°"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "none",
"innerRadius": 0.6,
"layers": [
{
"type": "donut",
"name": "Share",
"series": "Share",
"labels": [
"Alpha",
"Beta",
"Gamma"
]
}
]
}
}
}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": 520,
"toolbar": {
"show": false
}
},
"series": [
{
"name": "Signal",
"data": [
47,
42,
36,
32,
31,
28,
31,
33,
32,
33,
32,
32,
35,
37,
32,
34,
38,
40,
38,
37,
34,
34,
34,
33,
35,
36,
42,
44,
45,
50,
54,
50,
50,
54,
57,
57,
60,
59,
57,
60,
61,
62,
62,
64,
66,
65,
66,
68,
73,
73,
75,
74,
76,
81,
83,
83,
83,
81,
82,
87,
90,
92,
94,
95,
95,
92,
89,
93,
92,
92,
92,
95,
95,
93,
92,
87,
84,
85,
83,
85,
82,
85,
86,
86,
84,
81,
78,
81,
78,
74,
73,
68,
65,
66,
63,
63,
64,
63,
57,
58,
54,
53,
52,
48,
45,
47,
45,
44,
41,
44,
40,
42,
40,
41,
43,
38,
40,
41,
35,
33,
34,
37,
32,
34,
34,
29,
30,
33,
34,
32,
29,
26,
26,
28,
33,
33,
31,
32,
32,
34,
37,
35,
38,
40,
45,
41,
40,
42,
44,
46,
48,
48,
50,
53,
51,
53,
58,
60,
61,
60,
63,
68,
65,
68,
69,
72,
73,
77,
76,
74,
75,
79,
77,
76,
75,
81,
80,
83,
84,
85,
82,
85,
86,
87,
85,
84,
87,
90,
94,
94,
94,
89,
86,
89,
84,
86,
84,
87,
89,
90,
89,
87,
86,
86,
81,
80,
77,
77,
77,
72,
71,
68,
69,
71,
68,
67,
68,
66,
61,
61,
57,
58,
57,
51,
48,
46,
42,
41,
45,
42,
40,
39,
40,
38,
37,
37,
33,
34,
31,
27,
25,
26,
26,
31,
27,
31,
31,
30,
27,
25,
29,
28,
25,
24,
24,
27,
28,
31,
31,
31,
30,
31,
37,
41,
40,
45,
41,
43,
41,
41,
42,
47,
49,
51,
54,
53,
56,
54,
55,
56,
63,
60,
62,
65,
65,
65,
72,
70,
73,
79,
76,
75,
79,
79,
85,
86,
83,
81,
80,
82,
82,
85,
85,
90,
93,
92,
92,
92,
91,
93,
91,
90,
88,
86,
85,
82,
87,
90,
92,
88,
90,
86,
84,
82,
83,
80,
76,
73,
72,
70,
71,
69,
72,
69,
67,
61,
64,
63,
61,
60,
58,
59,
59,
58,
51,
49,
45,
43,
41,
41,
44,
41,
39,
35,
32,
36,
36,
39,
34,
31
]
},
{
"name": "Share",
"data": [
40,
35,
25
]
}
],
"xaxis": {
"categories": [
"0°",
"1°",
"2°",
"3°",
"4°",
"5°",
"6°",
"7°",
"8°",
"9°",
"10°",
"11°",
"12°",
"13°",
"14°",
"15°",
"16°",
"17°",
"18°",
"19°",
"20°",
"21°",
"22°",
"23°",
"24°",
"25°",
"26°",
"27°",
"28°",
"29°",
"30°",
"31°",
"32°",
"33°",
"34°",
"35°",
"36°",
"37°",
"38°",
"39°",
"40°",
"41°",
"42°",
"43°",
"44°",
"45°",
"46°",
"47°",
"48°",
"49°",
"50°",
"51°",
"52°",
"53°",
"54°",
"55°",
"56°",
"57°",
"58°",
"59°",
"60°",
"61°",
"62°",
"63°",
"64°",
"65°",
"66°",
"67°",
"68°",
"69°",
"70°",
"71°",
"72°",
"73°",
"74°",
"75°",
"76°",
"77°",
"78°",
"79°",
"80°",
"81°",
"82°",
"83°",
"84°",
"85°",
"86°",
"87°",
"88°",
"89°",
"90°",
"91°",
"92°",
"93°",
"94°",
"95°",
"96°",
"97°",
"98°",
"99°",
"100°",
"101°",
"102°",
"103°",
"104°",
"105°",
"106°",
"107°",
"108°",
"109°",
"110°",
"111°",
"112°",
"113°",
"114°",
"115°",
"116°",
"117°",
"118°",
"119°",
"120°",
"121°",
"122°",
"123°",
"124°",
"125°",
"126°",
"127°",
"128°",
"129°",
"130°",
"131°",
"132°",
"133°",
"134°",
"135°",
"136°",
"137°",
"138°",
"139°",
"140°",
"141°",
"142°",
"143°",
"144°",
"145°",
"146°",
"147°",
"148°",
"149°",
"150°",
"151°",
"152°",
"153°",
"154°",
"155°",
"156°",
"157°",
"158°",
"159°",
"160°",
"161°",
"162°",
"163°",
"164°",
"165°",
"166°",
"167°",
"168°",
"169°",
"170°",
"171°",
"172°",
"173°",
"174°",
"175°",
"176°",
"177°",
"178°",
"179°",
"180°",
"181°",
"182°",
"183°",
"184°",
"185°",
"186°",
"187°",
"188°",
"189°",
"190°",
"191°",
"192°",
"193°",
"194°",
"195°",
"196°",
"197°",
"198°",
"199°",
"200°",
"201°",
"202°",
"203°",
"204°",
"205°",
"206°",
"207°",
"208°",
"209°",
"210°",
"211°",
"212°",
"213°",
"214°",
"215°",
"216°",
"217°",
"218°",
"219°",
"220°",
"221°",
"222°",
"223°",
"224°",
"225°",
"226°",
"227°",
"228°",
"229°",
"230°",
"231°",
"232°",
"233°",
"234°",
"235°",
"236°",
"237°",
"238°",
"239°",
"240°",
"241°",
"242°",
"243°",
"244°",
"245°",
"246°",
"247°",
"248°",
"249°",
"250°",
"251°",
"252°",
"253°",
"254°",
"255°",
"256°",
"257°",
"258°",
"259°",
"260°",
"261°",
"262°",
"263°",
"264°",
"265°",
"266°",
"267°",
"268°",
"269°",
"270°",
"271°",
"272°",
"273°",
"274°",
"275°",
"276°",
"277°",
"278°",
"279°",
"280°",
"281°",
"282°",
"283°",
"284°",
"285°",
"286°",
"287°",
"288°",
"289°",
"290°",
"291°",
"292°",
"293°",
"294°",
"295°",
"296°",
"297°",
"298°",
"299°",
"300°",
"301°",
"302°",
"303°",
"304°",
"305°",
"306°",
"307°",
"308°",
"309°",
"310°",
"311°",
"312°",
"313°",
"314°",
"315°",
"316°",
"317°",
"318°",
"319°",
"320°",
"321°",
"322°",
"323°",
"324°",
"325°",
"326°",
"327°",
"328°",
"329°",
"330°",
"331°",
"332°",
"333°",
"334°",
"335°",
"336°",
"337°",
"338°",
"339°",
"340°",
"341°",
"342°",
"343°",
"344°",
"345°",
"346°",
"347°",
"348°",
"349°",
"350°",
"351°",
"352°",
"353°",
"354°",
"355°",
"356°",
"357°",
"358°",
"359°"
]
},
"plotOptions": {
"radialColumn": {
"aggregate": "none",
"innerRadius": 0.6,
"layers": [
{
"type": "donut",
"name": "Share",
"series": "Share",
"labels": [
"Alpha",
"Beta",
"Gamma"
]
}
]
}
}
}
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-live.json --out radial-column-live.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/live/index.md …This example uses Premium modules. Compare licences · Embedding in a distributed product?