JSFiddle - React, Tailwind, and code Playground

by michae1

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="testScores" style="min-width: 200px; height: 500px;max-width: 500px;"></div>

CSS

@font-face {
    font-family: 'Sans-Medium';
    src: url('https://github.com/erudit/maintenance/blob/master/fonts/maax/Sans-Medium.ttf?raw=true') format('truetype');
}

JavaScript

$(document).ready(function () {
    //Finance
    var chart = new Highcharts.Chart({
        chart: {
            type: 'column',
            renderTo: 'testScores',
            marginRight: 50,
            events: {
                       
            }
        },
        
        title: {
        	text: 'Demographic',
          align: 'left',
          style: {
          	color: 'black',
            fontWeight: '700',
            fontFamily: 'Sans-Medium',
            fontSize: 14,
            width: 90
          }
        },
        
        xAxis: {
            categories: ['18+', '18-25', '26-35', '18-25', '36-45', '56-65', '65+'],
            title: {
                text: null
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            labels: {
                style: {
                    color: 'black',
                    fontWeight: '500',
                    fontFamily: 'Sans-Medium',
                    fontSize: 14,
                    width: 90
                }
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        },
        tooltip: {
          useHTML: true,
          backgroundColor: null,
          borderWidth: 0,
          // pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
          shadow: false,
          formatter: function () {
            console.log('formatter', this);
            return '<div style="background-color:' + this.point.color + ';padding: 5px 8px 5px 8px;border-radius: 5px;box-shadow: 2px 2px 2px;color:#fff"> ' +
              this.key+': '+this.y+'%'+
              '</div>';
          }
        },
        plotOptions: {
            series: {
                //stacking: 'percent'
                grouping: false
            },
            bar: {
      ...