JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.src.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 () {
    
    // Small plugin to allow marker symbol settings to affect bubbles
    Highcharts.wrap(Highcharts.seriesTypes.bubble.prototype, 'translate', function (proceed) {
    	var renderer = this.chart.renderer,
        	symbol = this.options.marker.symbol;
    
        proceed.call(this);
        if (symbol && renderer.symbols[symbol]) {
            Highcharts.each(this.data, function (point) {
                point.shapeType = 'path';
                point.shapeArgs = {
                	d: renderer.symbols[symbol](
                        point.dlBox.x,
                        point.dlBox.y,
                        point.dlBox.width,
                        point.dlBox.height
	                ),
                    r: 0
                };
            });
        }
    });
    
    
    $('#container').highcharts({

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

	    title: {
	    	text: 'Highcharts Bubbles'
	    },
        	
	    series: [{
	        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: {
            	symbol: 'square'
            }
	    }, {
	        data: [[25,10,87],[2,75,59],[11,54,8],[86,55,93],[5,3,58],[90,63,44],[91,33,17],[97,3,56],[15,67,48],[54,25,81]],
            marker: {
            	symbol: 'diamond'
            }
	    }, {
	        data: [[47,47,21],[20,12,4],[6,76,91],[38,30,60],[57,98,64],[61,17,80],[83,60,13],[67,78,75],[64,12,10],[30,77,82]],
            marker: {
            	symbol: 'triangle'
            }
	    }]
	
	});
    
});