JSFiddle - React, Tailwind, and code Playground

by nagoba

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        defaultSeriesType:'scatter',
        borderWidth:1,
        borderColor:'#ccc',
        marginLeft:110,
        marginRight:50,
        backgroundColor:'#eee',
        plotBackgroundColor:'#fff',
        zoomType: 'xy'
    },
    title:{
        text:'Bubble Chart'
    },
    legend:{
                                     
    },
    plotOptions: {
        series: {
            shadow:false,
        }
    },
    xAxis:{
        minPadding:.075,
        maxPadding:.075,
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickLength:3,
        title:{
            text:'X Axis Title'
        }
    },
    yAxis:{
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickWidth:1,
        tickLength:3,
        gridLineColor:'#ddd',
        title:{
            text:'Y Axis Title',
            rotation:0,
            margin:50,
        }
    },
    series: [{
        marker:{
            symbol:'circle',
           fillColor: {
                 radialGradient: { cx: 0.5, cy: 0.3, r: 0.3},
                 stops: [
                     [0, '#ffffff'],
                     [1, '#58FA58']
                 ]
             },
            lineColor:'#58FA58',
            lineWidth:1,
            color:'#58FA58',
            states:{
                hover:{
                    enabled:false
                }
            }
        },
        data: [{x:2,y:3,marker:{radius:5}},
               {x:3,y:12,marker:{radius:10}},
               {x:5,y:6,marker:{radius:15}},
               {x:1,y:7,marker:{radius:25}},
               {x:7,y:18,marker:{radius:18}},
               {x:4,y:10,marker:{radius:14}},
               {x:4,y:3,marker:{radius:16}}]
       },{
        marker:{
            symbol:'circle',
           fillColor: {
                 radialGradient: { cx: 0.5, cy: 0.3, r: 0.3},
                 stops: [
                     [0,...