Plotly Playground

HTML

<head>
  <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="plot"></div>
  <div id="right_no_outlier"></div>
  <div id="bad_plot"></div>
</body>

JavaScript

var trace = {
  type: 'box',
  name: 'All Points',
  y: [[19], [18]],
  lowerfence: [0, -1],
  q1: [4, 3],
  median: [7, 5],
  q3: [12, 11],
  upperfence: [13, 12],
  boxpoints: 'all'
};


Plotly.newPlot('plot', [trace], {}, {displaylogo: false,
	responsive: true});


var trace = {
  type: 'box',
  name: 'All Points',
  y: [[19], []],
  lowerfence: [0, -1],
  q1: [4, 3],
  median: [7, 5],
  q3: [12, 11],
  upperfence: [13, 12],
  boxpoints: 'all'
};


Plotly.newPlot('right_no_outlier', [trace], {}, {displaylogo: false,
	responsive: true});

var trace = {
  type: 'box',
  name: 'All Points',
  y: [[], [18]],
  lowerfence: [0, -1],
  q1: [4, 3],
  median: [7, 5],
  q3: [12, 11],
  upperfence: [13, 12],
  boxpoints: 'all'
};


Plotly.newPlot('bad_plot', [trace], {}, {displaylogo: false,
	responsive: true});