Chart.js glitches and reverts to previous dataset on hover

I am using Chart.js (https://www.chartjs.org) to make a chart, but after you switch the chart data to a new dataset and roll over the chart with the cursor it glitches out and reverts back to the old dataset. Here is my code:

<li class="breadcrumb-item"><select id="cityselect" onchange="changeCity();">
<option value="la">Los Angeles</option>
<option value="oc">Orange County</option>
<option value="sf">San Francisco</option>
</select></li>

<div class="bottommargin divcenter" style="max-width: 90%; min-height: 350px;">
<canvas id="resChart"></canvas>
</div>

function changeCity(){
    var ctx = document.getElementById('resChart');
    var resChart = new Chart(ctx);
    resChart.destroy();

    getResChartData();
}

function getResChartData() {
    var city = document.getElementById("cityselect").value;
$.ajax({
        type: 'GET',
        url: 'getreschart.php',
        dataType: 'json',
        data: {  city:city, },
        success: function(response) {
          //console.log (response);

          function collate(d) {
            return d.reduce(function(prev, cur, index) {
                var ret = {};
                for (var prop in cur) {
                    if (index === 0) {
                        ret[prop] = [];
                    } else {
                        ret[prop] = prev[prop];
                    }
                    ret[prop].push(cur[prop]);
                }
                return ret;
            }, {});
        }

          var reduced = collate(response);
var ctx = document.getElementById('resChart').getContext('2d');
var resChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: reduced.mmyy,
        datasets: [{
            label: 'Fulfilled Reservations',
            data: reduced.fulfilledreservations,
            backgroundColor: window.chartColors.orange,
            borderColor: window.chartColors.orange,
            fill: false
        },
        {
            label: 'Unfulfilled Reservations',
            data: reduced.unfulfilledreservations,
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            fill: false
        },
        {
            label: 'All Reservations',
            data: reduced.allreservations,
            backgroundColor: window.chartColors.gray,
            borderColor: window.chartColors.gray,
            fill: false
        }]
    },
    options: {
        responsive: true,
        elements: {
            line: {
                tension: 0 // disables bezier curves
            }
        }
    }
});

        }
    });
}

As you can see I have destroyed the chart and I have updated it property (I think) - what gives?