Making angular-chartjs responsive with UI-Grid

You are setting data only once. All you need to do to make this dynamic is point it to a scope method that calculates data from the grid data, like so

Script change

Define a function to calculate the chart data structure from the grid data. Use this to initialize the graph and also update the graph when after cell edit is complete

var getData = function () {
    var seriesA = [];
    for (var i = 0; i < $scope.gridOptions.data.length; i++) {
        seriesA.push($scope.gridOptions.data[i].A);
    }

    console.log(seriesA);

    var seriesB = [];
    for (var i = 0; i < $scope.gridOptions.data.length; i++) {
        seriesB.push($scope.gridOptions.data[i].B);
    }

    console.log(seriesB);

    return [
        seriesA,
        seriesB
    ];
}

$scope.data = getData();

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;
    gridApi.edit.on.afterCellEdit($scope, function () {
        $scope.data = getData();
    });
};

Now, editing the grid entries will automatically update the chart.