Highcharts Demo

author(s): Torstein Hønsi

by handsoncode

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>

CSS

body {
  background: #FFF;
  padding: 0;
  margin: 0;
}

#container {
  min-width: 310px;
  max-width: 757px;
  height: 400px;
  margin: 0 auto
}

JavaScript

var trace1 = {
  x: ['Mat', 'Tom', 'Jane', 'Mark', 'Andy', 'Timothy', 'Adam', 'Mia'],
  y: [14, 11, 12, 13, 9, 12, 10, 11],
  mode: 'markers',
  marker: {
    color: ['rgb(93, 164, 214)', 'rgb(255, 144, 14)', 'rgb(44, 160, 101)', 'rgb(255, 65, 54)', 'rgb(44, 160, 101)', 'rgb(4, 60, 101)'],
    opacity: [0.5, 0.8, 0.6, 0.4, 0.5, 0.7, 0.3, 0.5],
    size: [40, 60, 80, 100, 50, 65, 70, 45]
  }
};

var data = [trace1];

var layout = {
  title: 'Age of contestant',
  showlegend: false,
  height: 600,
  width: 757
};

Plotly.newPlot('myDiv', data, layout);