JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Radial Gradient</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realchart {
	width: 850px;
	height: 550px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realchart/realchart-style.css" rel="stylesheet" crossorigin="anonymous">
<script type="text/javascript" src="https://unpkg.com/realchart/index"></script>
<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
	
</script>

  <script>
    var realChartLic = 'upVcPE+wPOkOR/egW8JuxkM/nBOseBrflwxYpzGZyYkhw7qfHRQ+GiF0lY62mJi5KBwoSJHOA48O5+/xJSE3LhLB4LkQ8rWX0QeIbtyyIEGTFVqWmNPdyQ==';
  </script>
</head>
<body>
	<div id="realchart"></div>
	

		 </body></html>

JavaScript

/**
 * @demo
 *
 */
const config = {
  general: {},
  title: 'Bubble Series',
  asset: [{
    type: 'radialGradient',
    id: 'gradient-1',
    color: ['#fff', '#0088ff'],
    cx: 0.3,
    cy: 0.3,
    rd: 0.4
  }],
  xAxis: {},
  yAxis: {},
  series: {
    type: 'bubble',
    pointLabel: {
      visible: true,
      suffix: 'm'
    },
    data: [[9, 81, 63], [98, 5, 89], [51, 50, 73], [41, 22, 14], [58, 24, 20], [78, 37, 34], [55, 56, 53], [18, 45, 70], [42, 44, 28], [3, 52, 59], [31, 18, 97], [79, 91, 63], [93, 23, 23], [44, 83, 22]],
    style: {
      fill: 'url(#gradient-1)'
    }
  }
};
let chart;
function init() {
  console.log('RealChart v' + RealChart.getVersion());
  // RealChart.setDebugging(true);
  RealChart.setLogging(true);
  chart = RealChart.createChart(document, 'realchart', config);
}