JSFiddle - React, Tailwind, and code Playground

by Laurie

HTML

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

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

CSS

.highcharts-tooltip h3 {
    margin: 0.3em 0;
}

JavaScript

var dataSeries = [{"x":-10.0000000000000,"y":"75.0000000000000","name":"Backup Maintenance"},{"x":"-25.0000000000000","y":"0","name":"Identity Access Management"},{"x":"-10.0000000000000","y":"-75.0000000000000","name":"Data Loss Prevention"},{"x":"-10.0000000000000","y":"-80.0000000000000","name":"Unified Communications"},{"x":"-50.0000000000000","y":"-50.0000000000000","name":"Video Communications"},{"x":"0","y":"0","name":"High Availability Data Center"},{"x":"15.0000000000000","y":"-25.0000000000000","name":"User Mobility Kit"},{"x":"10.0000000000000","y":"25.0000000000000","name":"Price Monitor Rewrite Phase 4"},{"x":"15.0000000000000","y":"50.0000000000000","name":"Price Monitor Additional Coverages"},{"x":"10.0000000000000","y":"75.0000000000000","name":"FDW Sakura Reporting"},{"x":"0","y":"80.0000000000000","name":"IE10 Browser Update"}];

$(function () {
    $('#container').highcharts({

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

        legend: {
            enabled: false
        },

        title: {
            text: ''
        },

        xAxis: {
           min:-100,
        max:100,
        tickInterval:100,
        tickLength:0,
        minorTickLength:0,
            title: {
                text: 'Business Perspective'
            },
            labels: {
               enabled: false,
                
            },
            plotBands: [{
            	from: 25,
                to: 75,
                label: {
                    text: 'Innovate',
                    align: 'center',
                    x: -10,
                    y: -5,
                    verticalAlign: 'bottom',
                    style: {
                        fontStyle: 'italic'
                    }
                }
            },
            {
            	from: -25,
                to: -75,
                label: {
                    text: 'Improve',
                    align: 'center',
     ...