Download Core

Violin ⇄ swarm morph

Toggle between density shapes and individual points.

Why it matters animated morph between violin and beeswarm by changing chart.type (dots fly to swarm positions), reduced-motion snaps

Chart type
Violin violin
Tier
Free Core
Collection
Violin
Render
Live, site theme
View .md Agent setup
LIVE/violin/violin-to-jitter-morph6 of 6 in Violin

Open the chart without page chrome ↗

Configuration

Raw Standalone 
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "violin",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Response ms",
      data: [
        {
          x: "Payments",
          y: [196.2, 227, 254, 215.7, 237.3, 224.4, 198.6, 144.2, 190.9, 189.7, 212, 212, 183, 227.6, 271.7, 190.4, 218.4, 206.5, 217.9, 196.8, 169.7, 217.1, 187.8, 207.6, 184.5, 188.8, 227.7, 264.1, 218.3, 262.3, 181.6, 182.1, 201.7, 225.7, 197.5, 215.8, 172, 195.4, 215.8, 229.6, 208.5, 189.4, 222.7, 201.7, 200.8, 215.5, 229.8, 189.5, 213, 204.9, 242.4, 187.4, 225.4, 255.6, 245.7, 177.8, 214.4, 229.6, 211.1, 192.3, 182.8, 209.2, 204.3, 223.9, 187.3, 186.5, 171.7, 253.3, 216.1, 199.1]
        },
        {
          x: "Search",
          y: [119.6, 183.2, 181.6, 191.9, 153.7, 145.7, 178.6, 194.2, 244.2, 189.6, 177.3, 131.1, 153.1, 191.5, 164.9, 156.8, 170.1, 137.9, 182.4, 146.8, 151.5, 85.8, 167.2, 173.9, 154.1, 236.5, 148.2, 206.8, 130.9, 178.4, 160.2, 141.9, 144.8, 108.9, 171.1, 146, 175.4, 170, 163.2, 179.6, 158.1, 128.4, 186.7, 162.3, 128.9, 151, 143.6, 173.5, 147.6, 141.1, 223.6, 175.1, 176.4, 69.9, 145.1, 140.5, 186.7, 131.2, 159.3, 152.3, 171.5, 150.1, 164.5, 122.3, 146.5, 138.4, 184, 111.4, 171.6, 152.6]
        },
        {
          x: "Checkout",
          y: [242.8, 295.4, 294.6, 292.5, 318.3, 272.3, 250.8, 286.1, 260, 279.9, 309.8, 240.2, 325.6, 331.7, 306.6, 279.9, 292.5, 313.7, 316.4, 255.8, 298.5, 291.3, 285.8, 329, 320.1, 305.9, 299.9, 317.9, 258.3, 306.7, 252.1, 252.1, 342.7, 288.6, 292.9, 266.6, 276.3, 263.6, 263.9, 292.3, 284.3, 261.8, 273.1, 275.4, 250.1, 274.1, 275.3, 273.1, 281.4, 290, 312, 319.4, 249.3, 272.8, 327.7, 222.8, 300.7, 252.5, 253.6, 286.6, 266.7, 279.9, 283.4, 262.8, 290.5, 248.8, 291.7, 298.3, 281.6, 303.3]
        }
      ]
    }
  ],
  title: {
    text: "Response time (ms)"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()