JSFiddle - React, Tailwind, and code Playground

by jbenedict

HTML

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

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

JavaScript

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

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

        title: {
            text: 'Top Ten Indiana College Return on Investment (ROI)',
        },
         subtitle: {
            text: 'Return on investment, calculated as a single dollar value, is a measure of the additional income that a degree holder received rather than if they had went straight to work with a high school diploma. The size of each circle corresponds with graduation rates.<br>By James Benedict and Brain Gamache<br>Source:Payscale.com'
        },
       
        
          tooltip: {
                    headerFormat: '<b>{series.name}</b><br>',
              pointFormat: '20 Year Net ROI <b>$ {point.x}</b> <br>Total Four Year Cost <b>$ {point.y}</b> <br>Graduation Rate <b> {point.z} %' ,
              
                },

       series: [{
            name: 'Rose-Hulman Institute of Technology (Private)',
            
            data: [[735100, 217900, 73]]
        }, 
                 {name: 'Wabash College (Private)',
            data: [[  597100, 175900, 69]]
        },  
                               {name: 'Purdue University - Main Campus (In-State)',
            data: [[591700, 91300, 70]]
        },  
                               {name: 'University of Notre Dame (Private)',
            data: [[546600, 226400, 95]]
        }, 
                               {name: 'Purdue University - Main Campus (Out-of-State)',
            data: [[518400, 164600, 70]]
                               }, 
                  {name: 'Valparaiso University (Private)',

            data: [[349500, 173500, 70]]
                               }, 
                  {name: 'Purdue University - Calumet Campus (In-State)',
            data: [[332200, 80800, 31]]
                               }, 
                  {name: 'Indiana University (IU) - Bloomington (In-State)',
            data: [[303000, 90000, 77]]
      ...