JSFiddle - React, Tailwind, and code Playground

by hpattern

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>
<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;
}
.myChart {
  margin-bottom: 1em;
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
        var container = document.getElementById('excel');
        var myData = [
            [30000, 45000],
            [10000, 45000],
            ['20000', '=SUM(b1:b2)']
        ];
        var hot = new Handsontable(container, {
            data: myData,
            rowHeaders: true,
            colHeaders: true,
            filters: true,
            dropdownMenu: true,
            formulas: true,
            licenseKey: "non-commercial-and-evaluation",
            beforeChange: function (changes, src) {
                if (src !== 'loadData') {
                    changes.forEach((change) => {
                        var row = change[0];
                        var col = change[1];
                        var value = change[3] === '' ? 0 : change[3];
                        myChart.data.datasets[row].data[col] = value;
                        myChart.update();
                    });
                }
            }// before change
        }) // hansontable
        var ctx = document.getElementById('myChart').getContext('2d');

        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['With Formula', 'Hard Coded'],
                datasets: [{
                    label: 'Formula Test',
                    data: [hot.getDataAtCell(0, 1), hot.getDataAtCell(1, 0), hot.getDataAtCell(0, 0), hot.getDataAtCell(1, 1)],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
 ...