JSFiddle - React, Tailwind, and code Playground

by thatdataguyau

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Distribution of Finalist Finishing Positions'
    },
    xAxis: {
        categories: ['8', '7', '6', '5', '4', '3', '2', '1'],
        tickmarkPlacement: 'on',
        title: {
            text: 'Finishing Position'
        }
    },
    yAxis: {
        title: {
            text: 'Probability'
        },
        labels: {
        	format: "{value} %"
        },
        max: 100,
    },
    plotOptions: {
        areaspline: {
            stacking: 'normal',
            marker: {
                enabled: false
            }
        }
    },
    tooltip: {
    formatter: function() {
        return this.series.name + ' = ' + this.x + ': ' + this.y + '%';
    }
},
    series: [{'name': 'SYD',
  'data': [0.0, 53.2, 26.0, 0.0, 0.0, 14.0, 5.4, 1.4],
  'color': 'rgb(247, 133, 198)'},
 {'name': 'GWS',
  'data': [0.0, 46.8, 25.7, 0.0, 0.0, 16.0, 8.0, 3.6],
  'color': 'rgb(255, 144, 0)'},
 {'name': 'GEE',
  'data': [56.3, 0.0, 0.0, 21.1, 10.4, 0.0, 5.7, 6.5],
  'color': 'rgb(102, 103, 147)'},
 {'name': 'HAW',
  'data': [0.0, 0.0, 0.0, 42.6, 15.0, 16.6, 15.8, 10.0],
  'color': 'rgb(89, 52, 4)'},
 {'name': 'MEL',
  'data': [43.7, 0.0, 0.0, 23.6, 12.8, 0.0, 8.0, 11.9],
  'color': 'rgb(206, 12, 12)'},
 {'name': 'WCE',
  'data': [0.0, 0.0, 31.5, 0.0, 24.1, 14.0, 16.9, 13.5],
  'color': 'rgb(255, 209, 25)'},
 {'name': 'COL',
  'data': [0.0, 0.0, 16.8, 0.0, 32.0, 11.6, 19.6, 20.0],
  'color': 'rgb(0, 0, 0)'},
 {'name': 'RIC',
  'data': [0.0, 0.0, 0.0, 12.7, 5.7, 27.8, 20.6, 33.2],
  'color': 'rgb(255, 255, 0)'}]
});