how to remove old data from Chart js on mouse hover using mvc c#?

Question

I am create one chart module in my project. I have add filter on this charts like month wise show data and week wise show data. and filter also working very well.but i have facing one issue on this charts. i have no idea where is my mistake or some js is coming I haven't idea.

Here I am describing my problem- First time load the charts month wise. then after I have change drop down value and select week wise show data. then also data is show correct. but then after I am going on this chart with my mouse pointer and pointer move left to right that time chart data is change and automatically show month data . why this problem is getting I don't know. here below i have show my code how can do that this task. and please let me know where is my problem.

Here is my html page =>

<canvas id="myChart"></canvas>

This is my filter drop down =>

  Filter :
            <select id="ddlFilter" onchange="FilterCharts()">
                <option selected="" value="Month">Month</option>
                <option value="Week">Week</option>
            </select>

This is my script link =>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

This is my ajax call on first time load intitally month wise =>

var FilterType = '';
$(document).ready(function () { 
  FilterType = $("#ddlFilter option:selected").val();
   LoadCharts(FilterType );
 });

This is my ajax call and bind data in chart =>

function LoadCharts(FilterType )
{
$.ajax({
    url: 'Home/GetChartsData',
    dataType: "json",
    data: { FilterType: FilterType},
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    async: false,
    cache: false,
    success: function (data) {
         var arrlableForSignUpUser = new Array();
        var arrdataForSignUpUser = new Array();
        for (var i = 0; i < data.data.length; i++) {
            arrlableForSignUpUser.push(data.data[i].DateColumn);
            arrdataForSignUpUser.push(data.data[i].TotalCount);
        }
        CountSignUpUser(arrlableForSignUpUser, arrdataForSignUpUser);
    },
    error: function (xhr) {
        alert('error');
    }
});
}

function CountSignUpUser(arrlableForSignUpUser, arrdataForSignUpUser) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: arrlableForSignUpUser,
        datasets: [{
            label: 'Successfull Sign-Ups',
            data: arrdataForSignUpUser,
            //backgroundColor: "rgba(153,255,51,1)"
            backgroundColor: '#34999c'
        }]
    },
});
}

This is my filter call for bind data week wise =>

function FilterCharts() { 
   FilterType = $("#ddlFilter option:selected").val();       
    LoadCharts(FilterType );
}

using this code I have success for the show chart.but here I am getting problem this describe code above. so please help me where is my problem.

Answer 1

I am getting solution on this post my self just need to destroy the myChart variable every time new chart create. and also declare the globally variable so esially access.

Like this declare globally varibale in js =>

var myChart = '';

and just check like this condition on create chart time =>

if (myChart) myChart.destroy();

so using this condition every time your chart is create fresh and remove all old data.