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: 'maaxmedium';
    src:...

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: '100',
            fontFamily: 'maaxmedium',
            fontSize: 14,
            width: 90
          }
        },
        
        xAxis: {
            categories: ['18+', '18-25', '26-35', '18-25', '36-45', '56-65', '65+'],
            title: {
                text: null
            },
            lineColor: 'transparent',
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            minorTickLength: 0,
   					tickLength: 0,
            labels: {
                style: {
                    color: 'black',
                    fontWeight: '100',
                    fontFamily: 'maaxmedium',
                    fontSize: 16,
                    width: 90
                }
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }
        },
        tooltip: {
           formatter: function () {
               return this.y + '%';
           },
           backgroundColor: '#5963a4',
           pointFormat: '<b>{point.percentage:.1f}%</b>',
           style: {
              color: '#fff',
              fontWeight: 'bold',
              fontSize: 16
          },
          shadow: false,
          padding:15,
          borderRadius: 10
        },
        plotOptions: {
            series: {
                //stacking: 'percent'
                grouping: false
            },
            bar: {
                dataLabels: {
   ...