JSFiddle - React, Tailwind, and code Playground

by thatdataguyau

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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', {
		legend: {
    		enabled: true
    },
    title: {
        text: 'Win Probability Calibration after % of Match Played'
    },
    xAxis: {
        title: {
            text: 'Predicted Win Probability'
        },
        min: 0,
        max: 100
        },
    yAxis: [{ //Primary (Score)
        title: {
            text: "Actual Win Probability"
        },
        min: 0,
        max: 100
    }],
    series: [{"color": Highcharts.getOptions().colors[0], "marker": false, "data": [[2.5, 2.5], [13.1, 13.1], [23.6, 23.6], [34.2, 34.2], [44.7, 44.7], [55.3, 55.3], [65.8, 65.8], [76.4, 76.4], [86.9, 86.9], [97.5, 97.5]], "name": "Calibration Line", "zIndex": 0}, {"name": "After 0.0% of Match", "color": Highcharts.getOptions().colors[1], "label": false, "zIndex": 2, "marker": {"symbol": "circle"}, "lineWidth": 0, "data": [[2.5, 6.5217], [13.1, 18.8119], [23.6, 27.8443], [34.2, 36.4583], [44.7, 47.8261], [55.3, 52.8053], [65.8, 67.0569], [76.4, 74.3243], [86.9, 85.6863], [97.5, 93.0769]]}, {"name": "Range", "color": Highcharts.getOptions().colors[1], "data": [[2.5, -2.1, 15.1], [13.1, 9.6, 28.0], [23.6, 19.6, 36.1], [34.2, 29.4, 43.5], [44.7, 40.4, 55.2], [55.3, 47.6, 58.0], [65.8, 62.4, 71.7], [76.4, 69.9, 78.8], [86.9, 81.8, 89.6], [97.5, 90.7, 95.5]], "zIndex": 1, "linkedTo": ":previous", "fillOpacity": 0.3, "marker": {"enabled": false}, "linewidth": 0, "type": "areasplinerange"}, {"name": "After 50.0% of Match", "color": Highcharts.getOptions().colors[2], "label": false, "zIndex": 2, "visible": false, "marker": {"symbol": "circle"}, "lineWidth": 0, "data": [[2.5, 2.8807], [13.1, 12.426], [23.6, 24.1497], [34.2, 31.0241], [44.7, 47.3333], [55.3, 51.7857], [65.8, 64.7239], [76.4, 82.5137], [86.9, 89.6761], [97.5, 97.5915]]}, {"name": "Range", "color": Highcharts.getOptions().colors[2], "data": [[2.5, 1.2, 4.5], [13.1, 8.3, 16.5], [23.6, 19.0, 29.3], [34.2, 25.3, 36.7], [44.7, 40.9, 53.8], [55.3, 45.2, 58.4], [65.8, 58.2, 71.3], [76.4,...