Chart.js using json data from MySQL

Minimal reproduction of your code seems to indicate that it is working fine, except the 2 options responsive and maintainAspectRatio (they works fine if the chart is contained in a div). Copy and paste as a new html file into your web server to view.

Key changes made from your sample code:

• AJAX API call changed to GET from ./
• Added fake success data

Note: responsive and maintainAspectRatio seems to cause the chart to "tremble", unless the chart is wrapped in a div

The problem could lie in elsewhere, maybe in your server response?

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js" integrity="sha256-JG6hsuMjFnQ2spWq0UiaDRJBaarzhFbUxiUTxQDA9Lk=" crossorigin="anonymous"></script>
<div style="width:500px;">
    <canvas id="ChartExpenseBar" width="200" height="200"></canvas>
</div>
<script>

    $(function () {
    var chartColors = {
        red: 'rgba(255, 99, 132, 1)',
        blue: 'rgba(54, 162, 235, 1)',
        yellow: 'rgba(255, 205, 86, 1)',
        green: 'rgba(75, 192, 192, 1)',
        purple: 'rgba(153, 102, 255, 1)',
        orange: 'rgba(255, 159, 64, 1)',
        darkgrey: 'rgba(102, 102, 102, 1)',
        maroon: 'rgba(200, 112, 91, 1)',
        khaki: 'rgba(190, 204, 200, 1)'
    };

    if( $("#ChartExpenseBar").length > 0 ){
        $.ajax({
            type: 'GET',
            url: './',
            data: {'expense_chart': 'monthly'},
            success: function(data) {
                var months = [];
                var amount = [];
                // fill with fake data
                data = [{"month":"Jan","amount":"0.00"},{"month":"Feb","amount":"0.00"},{"month":"Mar","amount":"100.00"},{"month":"Apr","amount":"0.00"},{"month":"May","amount":"0.00"},{"month":"Jun","amount":"977.00"},{"month":"Jul","amount":"0.00"},{"month":"Aug","amount":"0.00"},{"month":"Sep","amount":"0.00"},{"month":"Oct","amount":"0.00"},{"month":"Nov","amount":"0.00"},{"month":"Dec","amount":"0.00"}];
                for (var i in data) {
                    months.push(data[i].month);
                    amount.push(data[i].amount);
                }

                var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        //labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                        labels: months,
                        datasets: [{
                            label: 'Monthly expenses',
                            backgroundColor: [
                                chartColors.red,
                                chartColors.blue,
                                chartColors.yellow,
                                chartColors.purple,
                                chartColors.green,
                                chartColors.orange,
                                chartColors.red,
                                chartColors.blue,
                                chartColors.yellow,
                                chartColors.purple,
                                chartColors.green,
                                chartColors.orange
                            ],
                            borderColor: [
                                chartColors.red,
                                chartColors.blue,
                                chartColors.yellow,
                                chartColors.purple,
                                chartColors.green,
                                chartColors.orange,
                                chartColors.red,
                                chartColors.blue,
                                chartColors.yellow,
                                chartColors.purple,
                                chartColors.green,
                                chartColors.orange
                            ],
                            borderWidth: 1,
                            data: amount
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        tooltips: {
                            displayColors: false,
                            callbacks: {
                                // use label callback to return the desired label
                                label: function(tooltipItem, data) {
                                    return "£" + tooltipItem.yLabel;
                                },
                                // remove title
                                title: function(tooltipItem, data) {
                                    return;
                                }
                            }
                        },
                        legend: {
                            display: false
                        },
                        scales: {
                            xAxes: [{
                                gridLines: {
                                    display: false
                                }
                            }],
                            yAxes: [{
                                gridLines: {
                                    display: false
                                },
                                ticks: {
                                    beginAtZero:true,
                                    userCallback: function(value, index, values) {
                                        // Convert the number to a string and splite the string every 3 charaters from the end
                                        value = value.toString();
                                        value = value.split(/(?=(?:...)*$)/);

                                        // Convert the array to a string and format the output
                                        value = value.join('.');
                                        return '£' + value;
                                    }
                                }
                            }]
                        }
                    }
                });
            },
            error: function() {
                alert("There is a problem with loading the chart!");
            }
        });
    }
    });

</script>

In case anyone finds themselves in a similar position, I have highlighted the answer to the above problem below - thank you to wp78de and Edwin.

  $(function () {
var chartColors = {
    red: 'rgba(255, 99, 132, 1)',
    blue: 'rgba(54, 162, 235, 1)',
    yellow: 'rgba(255, 205, 86, 1)',
    green: 'rgba(75, 192, 192, 1)',
    purple: 'rgba(153, 102, 255, 1)',
    orange: 'rgba(255, 159, 64, 1)',
    darkgrey: 'rgba(102, 102, 102, 1)',
    maroon: 'rgba(200, 112, 91, 1)',
    khaki: 'rgba(190, 204, 200, 1)'
};

if( $("#ChartExpenseBar").length > 0 ){
    $.ajax({
        type: 'GET',
        async: false,
        dataType: 'json',
        url: '/expenses/',
        data: {'expense_chart': 'monthly'},
        success: function(data) {
            var months = [];
            var amount = [];

            for (var i in data) {
                months.push(data[i].month);
                amount.push(data[i].amount);
            }

            var ctx = document.getElementById("ChartExpenseBar").getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {                    
                    labels: months,
                    datasets: [{
                        label: 'Monthly expenses',
                        backgroundColor: [
                            chartColors.red,
                            chartColors.blue,
                            chartColors.yellow,
                            chartColors.purple,
                            chartColors.green,
                            chartColors.orange,
                            chartColors.red,
                            chartColors.blue,
                            chartColors.yellow,
                            chartColors.purple,
                            chartColors.green,
                            chartColors.orange
                        ],
                        borderColor: [
                            chartColors.red,
                            chartColors.blue,
                            chartColors.yellow,
                            chartColors.purple,
                            chartColors.green,
                            chartColors.orange,
                            chartColors.red,
                            chartColors.blue,
                            chartColors.yellow,
                            chartColors.purple,
                            chartColors.green,
                            chartColors.orange
                        ],
                        borderWidth: 1,
                        data: amount
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        displayColors: false,
                        callbacks: {
                            // use label callback to return the desired label
                            label: function(tooltipItem, data) {
                                return "£" + tooltipItem.yLabel;
                            },
                            // remove title
                            title: function(tooltipItem, data) {
                                return;
                            }
                        }
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                beginAtZero:true,
                                userCallback: function(value, index, values) {
                                    // Convert the number to a string and splite the string every 3 charaters from the end
                                    value = value.toString();
                                    value = value.split(/(?=(?:...)*$)/);

                                    // Convert the array to a string and format the output
                                    value = value.join('.');
                                    return '£' + value;
                                }
                            }
                        }]
                    }
                }
            });
        },
        error: function() {
            alert("There is a problem with loading the chart!");
        }
    });
   }
 });