JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
   
</head>
<body>
    <div style="width: 500px;">
    <h2 style="text-align: center;">Autojen lukumäärä</h2>
    <button onclick="addCar(0)">Ford</button>
    <button onclick="addCar(1)">Opel</button>
    <button onclick="addCar(2)">Toyota</button>
    <button onclick="nollaa()">Nollaa</button>
    <canvas id="viivaTaulukko" height="300" width="500"></canvas>
    </div>  
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
    <script src="autolaskuri.js"></script>
    <p id="Ford"></p>
    <p id="Opel"></p>
    <p id="Toyota"></p>
    <p id="Nollaa"></p>

    <script>
        function addCar(columnNumber){
            barChart.data.datasets[0].data[columnNumber] += 1;
            barChart.update();
        }

        function nollaa(){
            let colsCount = barChart.data.datasets[0].data.length;
        		for (let colNo = 0; colNo < colsCount; colNo++) {
            	barChart.data.datasets[0].data[colNo] = 0;
        		}
        		barChart.reset();
        }

    </script>

</body>
</html>

JavaScript

const CHART = document.getElementById("viivaTaulukko");
let barChart = new Chart(CHART, {
    type: 'bar',
    data: {
        labels: ["Ford", "Opel", "Toyota"],
        datasets: [
            {
                label: "Autojen lukumäärät",
                data: [0,0,0],
                backgroundColor: ["#0EBFE9", "#8E388E", "#70DBDB"]

            }
            
        ]
    },
    options:{
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});