JSFiddle - React, Tailwind, and code Playground

by Satyanshu Acharya

HTML

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

<div id="container" style="height: 400px"></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',
                    marker: {
                        fillOpacity:1,
                        radius:7,
                        lineWidth:.5,
                        lineColor:'#fff',
                    },

                }
            },
            xAxis:{
                title:{
                    text:'Practicality...