<html>
<body>
  


    <input name="inputb" type="number" id="inputb" value="300000">  
    <input name="inputa" type="number" id="inputa" value="50000"> 
 <ul>
      <li>Total loss of: 
        <input name="inputc" type="number" id="inputc" value="400000"></li>
        
 
        
    </ul>
     
      <button onclick="graphMe()">Update Graph</button>
  
  
<div class="graph_container">
														<canvas id="Chart1"></canvas>
						</div>
</body>
</html>
.graph_container{
  display:block;
  width:500px;
  }
var bar_stacked = {
    tooltips: {
        enabled: false
    },
    scales: {
        xAxes: [{
            ticks: {
                beginAtZero:true,
            },
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    },
    legend:{
        display:true      
    }        
};

var ctx = document.getElementById("Chart1");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Your graph"],
        
         datasets: [{
            data: [50000],
            backgroundColor: "rgba(34,30,31,1)",
           label: "Deductible"
        },{
            data: [250000],
            backgroundColor: "rgba(243,125,33,1)",
          label: "Protection"
        },{
            data: [50000],
            backgroundColor: "rgba(0,150,145,1)",
          label: "Additional Cost"
        }]
    },
    options: bar_stacked,
});

//get input values
function graphMe(){
  
     var v1 = parseInt(document.getElementById("inputa").value);
    var v2 = parseInt(document.getElementById("inputb").value);
    var v3 = parseInt(document.getElementById("inputc").value);

  if (!v1) { v1 = 0; }
  if (!v2) { v2 = 0; }
  if (!v3) { v3 = 0; }

myChart.data.datasets[0].data[0] = v1
myChart.data.datasets[1].data[0] = v2 - v1;
myChart.data.datasets[2].data[0] = v3 - v2;
myChart.update();  
 }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js