Problema com chartjs - grafico se sobrepondo

Bom dia Pessoal,

Será que alguém pode me ajudar? Estou com problema com o chartjs. estou gerando grafico ok, porem quando eu preciso gerar o mesmo pela segunda vez passando outros parametros ao invés de substituir ele sobrepõe sobre o antigo, e quando eu passo o mouse sobre o grafico ele fica intercalando entre o antigo e o novo, como faço para limpar o grafico antes de criar o novo? tentei diretamente no canvas mas qualquer metodo de limpeza faz com que pare de funcionar. abaixo meu código.

<script>
 function montaGraficoProducao() {
 var ctx;
 var myChart;
 var dt1 = document.getElementById("data_pd1").value;
 var dt2 = document.getElementById("data_pd2").value;
 $.ajax({
 type: "POST",
 url: "processa/processa_grafico_producao.jsp",
 data: {
 data1: dt1,
 data2: dt2
 }
 }).done(function (msg) {

 if (msg.replace(/\s/g, '') !== "erro") {
 var info = msg.trim().split("*");
 var l = info[0];
 var l1 = l.split(",");
 var s = info[1];
 var s1 = s.split(",");
 var labels = [];
 var series = [];
 l1.forEach(function (mes) {
 labels.push(mes);
 });
 s1.forEach(function (vl) {
 series.push(vl);
 });
 ctx = document.getElementById('prodChart').getContext('2d');
 myChart = new Chart(ctx, {
 type: $("#c_tipo_graf").val(),
 responsive: true,
 hoverMode: 'index',
 stacked: true,
 data: {
 labels: labels,
 datasets: [{
 label: 'Ton/Mês',
 fill: false,
 backgroundColor: "rgba(1, 150, 249, 1)",
 borderColor: "rgba(1, 150, 249, 1)",
 data: series
 }]
 }
 });
 } else {
 alert("erro");
 }
 });
 }
 </script>