JSFiddle - React, Tailwind, and code Playground

HTML

<form name="dieForm" onsubmit="makeChart()">
    <fieldset>
        <legend>Coin Toss Options</legend>
        <label>Number of coin tosses</label>
        <input name="numTrials" type="text" placeholder="Enter a number">
            <label>Heads Probability</label>
            <input name="headsProb" type="text" placeholder="Percent">
                <div>
                    <button type="submit" class="btn"><i class="icon-play-circle"></i> Run</button>
                </div>
    </fieldset>
</form>
        
        <div class="span9">
          <h2>Results</h2>
          <div class="container-fluid">
            <div id="colChartContainer" style="height: 300px; width: 100%;">
            </div>
        </div>
      </div>

JavaScript

window.onload = function makeChart() {
  var p = Number(dieForm.elements["headsProb"].value);
  var numTrials = Number(dieForm.elements["numTrials"].value);
  var dieResults = coinToss(p, numTrials);
  var dieResults = [150,50]
  var heads = dieResults[0];
  var tails = dieResults[1];

  var chart = new CanvasJS.Chart("colChartContainer", {
      theme: "theme2",
      title:{
          text: "Coin Toss Results"              
     },
      data: [              
      {
            type: "column",
            dataPoints: [
              { label: "Heads", y: heads},
              { label: "Tails", y: tails}
            ]
        }
      ]
    });

    chart.render();
  }