I have a problem when I try to reload the graphic on the canvas with ChartJs again. At the time of making a new search, I left the previous graphic data when moving the mouse over the graphic. I would like to know how to restart the graph.

Function

  function cargar_datos(datasL,dataP,dataR){
  var ctx = $("#myChart")
  var chart = new Chart(ctx, {
    type: 'line',
    data:
    {
      labels: datasL,
      datasets:
      [{
        label: "Rendimiento",
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: ['rgba(255,200,200,0)'],
        borderWidth: 2,
        pointBackgroundColor: "red",
        pointBorderColor: "rgba(250,10,10,0.1)",
        pointBorderWidth: "10",
        pointStyle: "rectRounded",
        data:dataP,
        },
        {
        label: "Aplicado",
        borderColor: 'rgb(0, 143, 255)',
        backgroundColor: ['rgba(112, 171, 219, 0.2)'],
        borderWidth: 2,
        pointBackgroundColor: "blue",
        pointBorderColor: "rgba(144, 140, 174, 0.3)",
        pointBorderWidth: "10",
        pointStyle: "rectRounded",
        data: dataR
      }]
    },
    options: {
        tooltips: {
                 position: 'average',
                mode: 'index',
                intersect: false,
          },
  }
  });
  chart.destroy();
}

Js

 $(document).on('click','#Mostrarb',function(){
    cargar_datos(labels,rend,porc);
});

the html

<div class="box-body">
      <canvas id="myChart" width="200" height="35"></canvas>
 </div>

I have a problem when I try to reload the graphic on the canvas with ChartJs again. At the time of making a new search, I left the previous graphic data when moving the mouse over the graphic. I would like to know how to restart the graph.

Function

  function cargar_datos(datasL,dataP,dataR){
  var ctx = $("#myChart")
  var chart = new Chart(ctx, {
    type: 'line',
    data:
    {
      labels: datasL,
      datasets:
      [{
        label: "Rendimiento",
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: ['rgba(255,200,200,0)'],
        borderWidth: 2,
        pointBackgroundColor: "red",
        pointBorderColor: "rgba(250,10,10,0.1)",
        pointBorderWidth: "10",
        pointStyle: "rectRounded",
        data:dataP,
        },
        {
        label: "Aplicado",
        borderColor: 'rgb(0, 143, 255)',
        backgroundColor: ['rgba(112, 171, 219, 0.2)'],
        borderWidth: 2,
        pointBackgroundColor: "blue",
        pointBorderColor: "rgba(144, 140, 174, 0.3)",
        pointBorderWidth: "10",
        pointStyle: "rectRounded",
        data: dataR
      }]
    },
    options: {
        tooltips: {
                 position: 'average',
                mode: 'index',
                intersect: false,
          },
  }
  });
  chart.destroy();
}

Js

 $(document).on('click','#Mostrarb',function(){
    cargar_datos(labels,rend,porc);
});

the html

<div class="box-body">
      <canvas id="myChart" width="200" height="35"></canvas>
 </div>

• javascript
• jquery
• chart.js

2 Answers 2

That is because you are creating a new instance of chart.js every time you call the function, create a outiside var chart:

   var chart;
function cargar_datos(datasL,dataP,dataR){
var ctx = $("#myChart")
chart = new Chart(ctx, {
type: 'line',
    data:
        {
        labels: datasL,
        datasets:
            [{
                label: "Rendimiento",
                borderColor: 'rgb(255, 99, 132)',
                backgroundColor: ['rgba(255,200,200,0)'],
                borderWidth: 2,
                pointBackgroundColor: "red",
                pointBorderColor: "rgba(250,10,10,0.1)",
                pointBorderWidth: "10",
                pointStyle: "rectRounded",
                data:dataP,
                },
                {
                label: "Aplicado",
                borderColor: 'rgb(0, 143, 255)',
                backgroundColor: ['rgba(112, 171, 219, 0.2)'],
                borderWidth: 2,
                pointBackgroundColor: "blue",
                pointBorderColor: "rgba(144, 140, 174, 0.3)",
                pointBorderWidth: "10",
                pointStyle: "rectRounded",
                data: dataR
            }]
    },
    options: {
        tooltips: {
                position: 'average',
                mode: 'index',
                intersect: false,
        },
    }
});
chart.destroy();
}

This works fine only when chart.destroy() is used before new Chart(), not after after it.