Chartjs-Unable to use MyChart function

The error occur because in the scope of the metthod updateChartAjaxCall, myChart does not exist because your declared it inside the ‘$(document).ready(function(){‘ function

This should work

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

var myChart;

function updateChartAjaxCall(data1, data2) {
    //ajax call here 
    $.ajax({
        type: 'POST',
        url: 'data.php',
        dataType: 'html',
        data: {
            data1: data1,
            data2: data2
        },
        success: function (data) {

           removeData(myChart);
           addData(myChart, 'newLabel', [23, 33, 4]);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError);
        },
        complete: function () {}
    });
    event.preventDefault();
}

$(document).ready(function () {

    $.ajax({
        url: "http://localhost/chartjs/data.php",
        method: "GET",
        success: function (data) {
            console.log(data);
            var op1 = [];
            var op2 = [];

            let data_keys = Object.keys(data[0])
            console.log(data_keys)
            first = data_keys[0] //1st element
            second = data_keys[1] //2nd element

            for (var i in data) {
                op1.push(data[i][first])
                op2.push(data[i][second])

            }

            var chartdata = {
                labels: op1,
                datasets: [{
                    label: 'SystemID and Apparent Power (VA)',
                    backgroundColor: 'rgba(250, 50, 50, 0.4)',
                    borderColor: 'rgba(500, 50, 50, 0.5)',
                    hoverBackgroundColor: 'rgba(500, 30, 30, 0.2)',
                    hoverBorderColor: 'rgba(500, 30, 30, 0.3)',
                    data: op2
                }]
            };

            var ctx = document.getElementById('mycanvas').getContext('2d');

            myChart = new Chart(ctx, {
                type: 'line',
                data: chartdata,
                options: {
                    scales: {
                        xAxes: [{
                            ticks: {
                                fontSize: 10
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                fontSize: 10
                            }
                        }]
                    }
                }
            });
        },
        error: function (data) {
            console.log(data);
        }
    });


});

You can also add the utils function to the prototype to use function from myChart

Chart.prototype.removeData = function() {
    this.data.labels.pop();
    this.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    this.update();
}

Chart.prototype.addData = function(label, data) {
    this.data.labels.push(label);
    this.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    this.update();
}