JSFiddle - React, Tailwind, and code Playground

by Naveen Ravichandran

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bubble',
  },
  plotOptions: {
    bubble: {
      "sizeByAbsoluteValue": true,
			zMin: 0
    }
  },

  series: [{
        type: 'line',
        name: 'Regression Line',
        data: [[0, 1.11], [5, 4.51]],
        marker: {
            enabled: false
        },
        states: {
            hover: {
                lineWidth: 0
            }
        },
        enableMouseTracking: false
    },{
    "name": "First data set",
    "data": [{
      "x": 0,
      "y": 2,
      "z": 4.61,
    }],
  }, {
    "name": "Second data set",
    "data": [{
      "x": -1,
      "y": -3,
      "z": 4.6,
    }]
  },{
    "name": "Third data set",
    "data": [{
      "x": 2,
      "y": -3,
      "z": 14.6,
    }]
  }]
});