<div id='plot' style='width: 80%; height: 500px'></div>
let x = [];
let left = []; //will be the plot on the left half of the violin
let right = []; //will be the plot on the right side of the violin

//just make some dummy distributions that plot nicely
for (let i = 0; i < 200; i++) {
  if (i < 100) {
    x.push('a');
    left.push(Math.sin(i));
    right.push(0.5*Math.sin(i));
  } else {
    x.push('b');
    left.push(Math.sqrt(i)/10 - 1);
    right.push(Math.abs(Math.sin(i)));
  }
}

let data = [{
    x: x,
    y: left,
    type: 'violin',
    side: 'negative', //negative side means left for vertical violin plots
    name: 'left one'
  }, {
    x: x,
    y: right,
    type: 'violin',
    side: 'positive', //positive side means right for vertical violin plots
    name: 'right one'
}];

Plotly.react('plot', data);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.58.1/plotly.min.js