Handsontable example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<p>
  Where <strong>0</strong> is 'I do not like' and <strong>10</strong> 'I love it'
</p>
<canvas class="chartJSContainer" width='400' height='150'></canvas>
<div id="example1"></div>

CSS

body {
  padding: 0;
  margin: 0;
  background: #fff;
  font: 0.8em sans-serif;
  color: #333;
}

.chartJSContainer {
  margin-bottom: 1em;
}

JavaScript

let example = document.getElementById('example1');
let headers = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
let myData = [
  [5, 10, 3, 5, 2, 3],
  [9, 9, 3, 10, 8, 7],
  ['=average(A1:A2)', '=average(B1:B2)', '=average(C1:C2)', '=average(D1:D2)', '=average(E1:E2)', '=average(F1:F2)']
];
let rowheaders = ['Mark', 'Anna', 'AVERAGE'];
let hot = new Handsontable(example, {
  data: myData,
  rowHeaders: rowheaders,
  colHeaders: headers,
  rowHeaderWidth: 80,
  colWidths: 88,
  formulas: {
    engine: HyperFormula
  },
  licenseKey: 'non-commercial-and-evaluation',
  fillHandle: {
    autoInsertRow: false,
  },
  afterChange: function(changes, src) {
    if (src !== 'loadData') {
      changes.forEach((change) => {
        var row = change[0];
        var column = change[1];
        var value = change[3] === '' ? 0 : change[3];
       
        myChart.data.datasets[row].data[column] = value;
        myChart.data.datasets[2].data = this.getDataAtRow(2); 
        myChart.update();
      })
    }
  }
});

let options = {
  type: 'bar',
  data: {
    labels: headers,
    datasets: [{
      label: rowheaders[0],
      data: myData[0], //passing reference to the data array
      borderWidth: 1,
      backgroundColor: 'rgb(255, 236, 217)'
    }, {
      label: rowheaders[1],
      data: myData[1], //passing reference to the data array
      borderWidth: 1,
      backgroundColor: 'rgb(235, 224, 255)'
    }, {
      label: rowheaders[2],
      data: hot.getDataAtRow(2), //passing calculated data
      borderWidth: 1,
      backgroundColor: 'rgb(219, 242, 242)'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

let ctx = document.querySelector('.chartJSContainer').getContext('2d');
let myChart = new Chart(ctx, options);