JSFiddle - React, Tailwind, and code Playground

by Zeke Schmois

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://underscorejs.org/underscore.js" type="text/javascript"></script>

<div style="width: 100%; overflow: hidden;">
  <div id="container" style="width: 100%; float: left;"></div>
</div>

JavaScript

$(function () {
    $('#container').highcharts({

      chart: {

        zoomType: 'xy'
      },
      yAxis: {
        min: 0
      },
      plotOptions: {
        showLegend: false
      },

      title: {
        text: 'Highcharts Bubbles'
      },

      series: [{
        type: 'spline',
        name: 'user1',
        color: 'blue',
        lineWidth: 1,
        marker: {
          enabled: false
        },
        data: [0, 10, 20, 30]
      }, {
        type: 'spline',
        name: 'user2',
        color: 'red',
        lineWidth: 1,
        marker: {
          enabled: false
        },
        data: [0, 35]
      }, {
        type: 'spline',
        name: 'user3',
        color: 'green',
        lineWidth: 1,
        marker: {
          enabled: false
        },
        data: [0, 2, 5, 10, 10]
      }, {
        type: 'bubble',
        name: 'user1',
        color: 'blue',
        data: [
          [3, 30, 50]
        ]
      }, {
        type: 'bubble',
        name: 'user2',
        color: 'red',
        data: [
          [1, 35, 60]
        ]
      }, {
        type: 'bubble',
        name: 'user3',
        color: 'green',
        data: [
          [4, 10, 55]
        ]
      }]

    });
  });