JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

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

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

JavaScript

Highcharts.chart('container', {

    chart: {
      type: 'bubble',
      plotBorderWidth: 0,
      zoomType: 'xy'
    },

    title: {
      text: 'Highcharts bubbles with radial gradient fill'
    },

    xAxis: {
      gridLineWidth: 1,
      showEmpty: true,
      min: 0,
      max: 100
    },

    yAxis: {
      startOnTick: false,
      endOnTick: false,
      showEmpty: true,
      min: 0,
      max: 100
    },

    series: [{}]

  },
  function(chart) { // on complete

    chart.renderer.text('No Data Available', 200, 195)
      .attr({
        zIndex: 99
      })
      .css({
        color: '#000',
        fontSize: '25px'
      })
      .add();

  });