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: {
            
            backgroundColor: '#5963a4',
            pointFormat: '{point.percentage:.1f}%'
        },
        plotOptions: {
            series: {
                //stacking: 'percent'
                grouping: false
            },
            bar: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        legend: {
            enabled: false,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 0,
            backgroundColor: '#FFFFFF',
           ...