Raincloud variations
Switch between four layouts of the same data.
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "raincloud",
toolbar: {
show: false
}
},
series: [
{
name: "ms",
data: [
{
x: "EU",
y: [142.8, 82.5, 81, 122, 99.1, 147.1, 128.3, 138.8, 132.4, 117.4, 77.8, 140.3, 85.4, 164.2, 105.5, 186.8, 156, 126.4, 138.3, 137.2, 112.8, 126.8, 102.6, 142.1, 102.4, 91.3, 145.3, 102.2, 128.7, 91.8, 58.7, 117.8, 125.6, 137, 130.8, 108.2, 119.5, 152.1, 130.8, 135.1, 158.3, 122.2, 129.1, 109, 101.3, 140.2, 111.7, 82.3, 125.1, 111.7, 127.3, 139, 138.1, 143.2, 86.7, 116, 102.4, 165.8, 124.2, 122.6, 119.8, 139.5, 107, 118.2, 104.7, 119.7, 126, 116.5, 126.9, 159.7, 122.6, 107.4, 104.6, 114.8, 122.9, 143.7, 127.5, 119, 104.2, 146.8, 111.4, 110.4, 148.2, 116.7, 135.8, 147.1, 130.1, 134.7, 119.1, 119.1]
},
{
x: "US",
y: [152.2, 175.5, 171.3, 145.4, 143.7, 142.7, 155.3, 176.8, 154.6, 137.2, 134.5, 157, 134.6, 136.3, 184.5, 148.3, 145.5, 171, 172, 142.5, 164.3, 178.9, 144.1, 129.4, 109.3, 137.9, 161.5, 163.5, 154.4, 138.1, 152, 142.5, 166.2, 191.9, 150.4, 126.8, 170.7, 159.1, 160.2, 137.6, 169.2, 200.3, 131.2, 141.9, 137.1, 180.3, 147.1, 159, 157.6, 141.2, 189.2, 161.3, 163.8, 179.9, 160.1, 125.2, 130.2, 121.5, 140.5, 146.2, 156.1, 163.8, 139, 107.6, 158.3, 175.6, 154.7, 131.6, 165.2, 103.3, 156.1, 115, 149.3, 142, 136.2, 163.2, 148.3, 130.3, 157.3, 177, 158.8, 141.6, 187.4, 149.8, 157, 130.7, 148.2, 149.3, 142.9, 163]
},
{
x: "APAC",
y: [167.1, 195.2, 189.7, 175.5, 197.2, 200.4, 204.5, 185.8, 166.8, 164.8, 204.7, 147.8, 179.7, 117.4, 183.5, 157.7, 163.7, 151.7, 230.9, 172.4, 189.6, 144.2, 201.9, 156, 182.4, 170, 154.4, 196.7, 201.2, 167.3, 169.3, 203.5, 214.8, 208.5, 170.8, 154.1, 183.1, 176.3, 176.6, 193.1, 203.6, 180.1, 188.8, 161.5, 180.7, 202.9, 143.7, 170.7, 204.3, 164, 198.4, 168.2, 212.1, 166.4, 192, 184, 179.1, 192.9, 189.7, 157.4, 191.8, 193.4, 198.2, 194.5, 176.4, 155.7, 161.6, 175.6, 164.8, 173.9, 164.6, 180, 187.8, 210, 187.3, 176.8, 220.6, 153.1, 177.6, 197.7, 183.6, 192.2, 165, 179, 168.8, 161.3, 181.1, 148.4, 165.2, 178.1]
}
]
}
],
plotOptions: {
bar: {
horizontal: true
}
},
title: {
text: "Latency by region (ms)"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
WestCoastCharts.use(types)
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "raincloud",
toolbar: {
show: false
}
},
series: [
{
name: "ms",
data: [
{
x: "EU",
y: [142.8, 82.5, 81, 122, 99.1, 147.1, 128.3, 138.8, 132.4, 117.4, 77.8, 140.3, 85.4, 164.2, 105.5, 186.8, 156, 126.4, 138.3, 137.2, 112.8, 126.8, 102.6, 142.1, 102.4, 91.3, 145.3, 102.2, 128.7, 91.8, 58.7, 117.8, 125.6, 137, 130.8, 108.2, 119.5, 152.1, 130.8, 135.1, 158.3, 122.2, 129.1, 109, 101.3, 140.2, 111.7, 82.3, 125.1, 111.7, 127.3, 139, 138.1, 143.2, 86.7, 116, 102.4, 165.8, 124.2, 122.6, 119.8, 139.5, 107, 118.2, 104.7, 119.7, 126, 116.5, 126.9, 159.7, 122.6, 107.4, 104.6, 114.8, 122.9, 143.7, 127.5, 119, 104.2, 146.8, 111.4, 110.4, 148.2, 116.7, 135.8, 147.1, 130.1, 134.7, 119.1, 119.1]
},
{
x: "US",
y: [152.2, 175.5, 171.3, 145.4, 143.7, 142.7, 155.3, 176.8, 154.6, 137.2, 134.5, 157, 134.6, 136.3, 184.5, 148.3, 145.5, 171, 172, 142.5, 164.3, 178.9, 144.1, 129.4, 109.3, 137.9, 161.5, 163.5, 154.4, 138.1, 152, 142.5, 166.2, 191.9, 150.4, 126.8, 170.7, 159.1, 160.2, 137.6, 169.2, 200.3, 131.2, 141.9, 137.1, 180.3, 147.1, 159, 157.6, 141.2, 189.2, 161.3, 163.8, 179.9, 160.1, 125.2, 130.2, 121.5, 140.5, 146.2, 156.1, 163.8, 139, 107.6, 158.3, 175.6, 154.7, 131.6, 165.2, 103.3, 156.1, 115, 149.3, 142, 136.2, 163.2, 148.3, 130.3, 157.3, 177, 158.8, 141.6, 187.4, 149.8, 157, 130.7, 148.2, 149.3, 142.9, 163]
},
{
x: "APAC",
y: [167.1, 195.2, 189.7, 175.5, 197.2, 200.4, 204.5, 185.8, 166.8, 164.8, 204.7, 147.8, 179.7, 117.4, 183.5, 157.7, 163.7, 151.7, 230.9, 172.4, 189.6, 144.2, 201.9, 156, 182.4, 170, 154.4, 196.7, 201.2, 167.3, 169.3, 203.5, 214.8, 208.5, 170.8, 154.1, 183.1, 176.3, 176.6, 193.1, 203.6, 180.1, 188.8, 161.5, 180.7, 202.9, 143.7, 170.7, 204.3, 164, 198.4, 168.2, 212.1, 166.4, 192, 184, 179.1, 192.9, 189.7, 157.4, 191.8, 193.4, 198.2, 194.5, 176.4, 155.7, 161.6, 175.6, 164.8, 173.9, 164.6, 180, 187.8, 210, 187.3, 176.8, 220.6, 153.1, 177.6, 197.7, 183.6, 192.2, 165, 179, 168.8, 161.3, 181.1, 148.4, 165.2, 178.1]
}
]
}
],
plotOptions: {
bar: {
horizontal: true
}
},
title: {
text: "Latency by region (ms)"
},
theme: {
mode: "light",
preset: "coastal"
}
}
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 raincloud-raincloud-variations.json --out raincloud-raincloud-variations.svg --with-table Public 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/raincloud/raincloud-variations/index.md …