JSFiddle - React, Tailwind, and code Playground

by Satyanshu Acharya

HTML

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

<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />

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

JavaScript

var practicalityscore = [];
practicalityscore.push([5, 7, "Spread the word"],[10,5,"Have fun"]);
var onlyName = [];
onlyName.push(["Spread the word"],["Have fun"]);

 function prepare(dataArray) {
        return dataArray.map(function (item, Title) {
            return {x: item[0], y: item[1], myIndex:Title};
        });
    };


$(function () {

           $('#container').highcharts({
            chart: {
                renderTo: 'practicalityscore',
                zoomType: 'xy',
                defaultSeriesType:'scatter',
                borderWidth:1,
                borderColor:'#fff',
                marginLeft:50,
                marginRight:50,
                backgroundColor:'#fff',
                plotBackgroundColor:'#fff',

            },
            credits:{enabled:false},
            title:{
                text:'Most Practical Ideas',
                align: 'left',

            },
            legend:{
                enabled:false
            },
            tooltip:{
                crosshairs: [{
                    enabled:true,
                    width:1,
                    color:'rgba(238,46,47,.25)'
                },{
                    enabled:true,
                    width:1,
                    color:'rgba(238,46,47,.25)'
                }],

                formatter: function(){
                    return '<span><b>Practicality</b>: '+ Highcharts.numberFormat(this.x,0) + '<br/><span><b>Avg IPA</b>: '+ Highcharts.numberFormat(this.y,0) + '<br/><span><b>Idea</b>: '+onlyName[this.point.myIndex];
                }
            },
               
            plotOptions: {
                series: {
                    color:'#0093dd',
                     point: {
                        events: {
                            click: function (e) {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: e.pageX || e.clientX,
                       ...