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="chart1" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#chart1').highcharts({
             
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Students per counselor at Big 10 Universities'
                },
                subtitle: {
                    text: 'Sources: The counseling services and offices of enrollment at each university<br>By: James Benedict '
                },
                legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'top',
                        x: 0,
                        y: 55,
                        borderWidth: 0
                    },
                xAxis: {
                    categories: ['Minnesota', 'Michigan State', 'Iowa', 'Maryland', 'Ohio State', 'Indiana', 'Purdue', 'Nebraska', 'Penn State', 'Michigan', 'Illinois', 'Wisconsin', 'Rutgers', 'Northwestern'],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    plotLines: [{
                        value: 1500,
                        color: '#c1ba9d', 
                        width: 5,
                        zIndex: 4,
                        }],                       
                   
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                     valueSuffix: ' Students per counselor',
                  

                },
                plotOptions: {
                    series: {
                        animation: true,
                         borderWidth: 2,
                        pointPadding: 10,


                        pointWidth: 20
                    },
                    bar: {

                          // dataLabels: {
                          //       style: {
                          //    ...