Raincloud variations

Switch between four layouts of the same data.

Chart type
Raincloud raincloud
Tier
Free Core
Collection
Raincloud
Render
Live, site theme
View .md Agent setup
LIVE/raincloud/raincloud-variations4 of 4 in Raincloud

Configuration

Raw Standalone
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()