JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="width: 360px; width: 360px"></div>

JavaScript

window.chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'scatter',
        plotBorderWidth: 1,
        plotBorderRadius: 0,
        margin: [20, 20, 0, 0],
        borderColor: '#999'
    },
    title: null,
    legend: {
        enabled: false
    },
    yAxis: {
        offset: -170,
        lineWidth: 1,
        opposite: true,
        tickLength: 0,
        minPadding: 0.05,
        maxPadding: 0.05,
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        title: {
             margin: 175,
             text: 'Data Point Label'
        }
    },
    xAxis: {
        offset: -190,
        lineWidth: 1,
        opposite: true,
        tickLength: 0,
        minPadding: 0.05,
        maxPadding: 0.05,
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        title: {
             margin: 195,
             text: 'Data Point Label'
        }
    },
    plotOptions: {
        scatter: {
            states: {
                hover: {
                    enabled: false
                }
            },
            point: {
                events: {
                    mouseOver: function(){
                        var c = this.series.color,
                            r = parseInt(c.slice(1,3),16),
                            g = parseInt(c.slice(3,5),16),
                            b = parseInt(c.slice(5,7),16);
                        
                        this.graphic.attr('fill', 'rgba('+r+','+g+','+b+',0.8)');
                    },
                    mouseOut: function(){
                        // reset transparency
                        this.graphic.attr('fill', 'rgba(0,0,0,1)');
                        this.graphic.attr('fill', this.series.color);
                    }
                }
            }
        }
    },
    series: [{
        data: [{
             x: -4, 
             y: -4,
             marker: {
                 radius: 10
           ...