JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<input id="box1">: 1st value
<br>
<input id="box2">: 2nd value
<br>
<input id="box3">: 3rd value
<br>
<br>
    <input type="button" id="openchart" value="make chart"><br>
<div id="chartDialog"> 
    <div id="chartcontainer" style="width:100%;height:100%;"></div>
</div>

JavaScript

$('#chartDialog').dialog({
		title: 'Realtime distribution chart (click X to close)',		
        width:400,
        height:300
		});

$('#openchart').click(function () {
var diff = {
		first:  $('#box1').val(),
		second: $('#box2').val(),
        third:  $('#box3').val()
		};

var chart = new CanvasJS.Chart("chartcontainer", {      
      title:{
        text: "Graph"              
      },
	  axisY:{
	  title:"%",
	  suffix: "%"
	  },
      data: [//array of dataSeries              
        { //dataSeries object

         /*** Change type "column" to "bar", "area", "line" or "pie"***/
         type: "column",
         dataPoints: [
         { label: "first", y: parseInt(diff.first, 10) },
         { label: "second", y: parseInt(diff.second, 10) },
         { label: "third", y: parseInt(diff.third, 10) },                                    
         { label: "fourth", y: 40 },
         { label: "fifth", y: 50 }
         ]
       }
       ]
     });

  chart.render();
});