JSFiddle - React, Tailwind, and code Playground

by James Brown

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 942px; height: 485px; class=" scalable fancy "></div>

JavaScript

$(function () {
     $('#container').highcharts({
         chart: {
             type: 'scatter',
             backgroundcolor: 'null',
             plotBackgroundImage: 'http://www.seti.net/SkyMap.jpg',
             zoomType: 'xy'
         },
         title: {
             text: 'Height Versus Weight of 507 Individuals by Gender'
         },
         subtitle: {
             text: 'Source: Heinz  2003'
         },
         xAxis: {
             title: {
                 enabled: true,
                 text: 'Height (cm)'
             },
             startOnTick: true,
             endOnTick: true,
             showLastLabel: true
         },
         yAxis: {
             title: {
                 text: 'Weight (kg)'
             }
         },
         legend: {
             layout: 'vertical',
             align: 'left',
             verticalAlign: 'top',
             x: 100,
             y: 70,
             floating: true,
             backgroundColor: '#FFFFFF',
             borderWidth: 1
         },
         plotOptions: {
             scatter: {
                 marker: {
                     radius: 5,
                     states: {
                         hover: {
                             enabled: true,
                             lineColor: 'rgb(100,100,100)'
                         }
                     }
                 },
                 states: {
                     hover: {
                         marker: {
                             enabled: false
                         }
                     }
                 },
                 tooltip: {
                     headerFormat: '<b>{series.name}</b><br>',
                     pointFormat: '{point.x} cm, {point.y} kg'
                 }
             }
         },
         series: [{
             name: 'Female',
             color: 'rgba(223, 83, 83, .5)',
             data: [
                 [161.2, 51.6],
                 [167.5, 59.0],
                 [159.5, 49.2],
              ...