JSFiddle - React, Tailwind, and code Playground

by subhamgupta026

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function() {
/*   Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'drawPoints', function(proceed) {
    proceed.apply(this);
    for (i in this.data) {
      if (this.data[i].options.x > 90)
        this.data[i].graphic.dashstyleSetter(this.options.dashStyle || 'solid');
    }
  }); */

  $('#container').highcharts({
  xAxis: {
      title: {
        text: "DISPLAY WHATEVER YOU WANT TO"
      }
    },
    chart: {
      type: 'bubble',
      zoomType: 'xy'

    },
  
    title: {
      text: 'Highcharts Bubbles'
    },

    series: [{
      dashStyle: 'dash',
      data: [
        [97, 36, 79],
        [94, 74, 60],
        [68, 76, 58],
        [64, 87, 56],
        [68, 27, 73],
        [74, 99, 42],
        [7, 93, 87],
        [51, 69, 40],
        [38, 23, 33],
        [57, 86, 31]
      ],
      marker: {
        lineColor: 'red'
      }
    }]
  });
});