CODEWITHSUNDEEP
javascripthtmlcanvaschart.js
user8933133
user8933133

Reputation:

ChartJS dynamic line chart ghosting back to old data when hovered on

I'm having an issue with my chart (using ChartJs) where once I've edited the data on a chart, if I hover over that same chart it occasionally glitches to show previous data.

I've googled the issue and I know that the resolution most of the time is to use .destroy(), but for whatever reason (maybe I haven't put it into the right place?) it's not working for me. My actual code is very long and complicated so I've taken some bits out and made the array randomly generated just to make it simple. The base issue should still be there.

function genCharts() {
    var colours = ['#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149']

    var chartTheme = {
        type: 'line',
        data: {
            labels: ['3.1', '3.2'],
        },
        options: {
            legend: {
                display: false
            },
            tooltips: {
                xPadding: 15,
                yPadding: 15,
                titleFontColor: 'rgb(256,256,256)',
                backgroundColor: 'rgba(67, 183, 249,0.8)',
                displayColors: false,
                cornerRadius: 3,
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'PRICE'
                    }
                }]
            }
        },
    };

    var chartId = document.getElementById('chart').getContext('2d');

    var chart = new Chart(chartId, chartTheme);

    chart.destroy();

    chart = new Chart(chartId, chartTheme);

    var array = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
    var array2 = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];

    var i;
    for (i = 0; i < array.length; i++) {
        var newData = {
            data: [array[i], array2[i]],
            label: 'random number',
            pointStyle: 'rectRot',
            pointRadius: 5,
            pointBorderWidth: 5,
            pointHoverBorderColor: 'rgba(256,256,256)',
            pointHoverRadius: 8,
            pointHoverBorderWidth: 8,
            borderColor: colours[i]
        }

        chart.data.datasets.push(newData);
    }

    chart.update();
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <input type='button' value='generate' id='button' onclick='genCharts()'>
    <div style='height:200px; width: 200px;'>
        <canvas width='10' height='10' id='chart' style='height:10px; width: 100px;'></canvas>
    </div>
</body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js'></script>
<script src='scriptOne.js'></script>

</html>

Upvotes: 0

Views: 414

Answers (2)

Kunal Khivensara
Kunal Khivensara

Reputation: 1669

Well, that is not a correct way to destroy chart, the chart variable is a local variable and you are creating a new chart to the local variable and destroying that again that doesn't mean it has destroyed all other previously created instances. One of the solutions would create a global variable to hold charts and destroy if everytime when the genCharts() is called. Here is the fiddle -> http://jsfiddle.net/srgw2y7m/

Hope it helps!

var chart;

function genCharts() {

  if (chart) {
    chart.destroy();
  }

  var colours = ['#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149', '#ff3232', '#ff5731', '#ff9130', '#ffc730', '#fffb30', '#cbff30', '#7bff30', '#30ff55', '#30ffb9', '#30f4ff', '#42a3ff', '#6083ff', '#7760ff', '#c535ff', '#ff34fb', '#ff33aa', '#ff3276', '#ff3149']

  var chartTheme = {
    type: 'line',
    data: {
      labels: ['3.1', '3.2'],
    },
    options: {
      legend: {
        display: false
      },
      tooltips: {
        xPadding: 15,
        yPadding: 15,
        titleFontColor: 'rgb(256,256,256)',
        backgroundColor: 'rgba(67, 183, 249,0.8)',
        displayColors: false,
        cornerRadius: 3,
      },
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'PRICE'
          }
        }]
      }
    },
  };

  var chartId = document.getElementById('chart').getContext('2d');

  chart = new Chart(chartId, chartTheme);

  var array = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];
  var array2 = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()];

  var i;
  for (i = 0; i < array.length; i++) {
    var newData = {
      data: [array[i], array2[i]],
      label: 'random number',
      pointStyle: 'rectRot',
      pointRadius: 5,
      pointBorderWidth: 5,
      pointHoverBorderColor: 'rgba(256,256,256)',
      pointHoverRadius: 8,
      pointHoverBorderWidth: 8,
      borderColor: colours[i]
    }

    chart.data.datasets.push(newData);
  }

  chart.update();
}

Upvotes: 2

Joseph Cho
Joseph Cho

Reputation: 4214

You are using the .destroy() method correctly. When I encountered the same issue as you I ended up following other people's recommendation and destroying the entire canvas element from the DOM and re-rendering it.

I would alter your genCharts() function to look like this:

$('#chart').remove();
$('#canvasContainer').append("<canvas width='10' height='10' id='chart' style='height:10px; width: 100px;'></canvas>");

var chartId = document.getElementById('chart').getContext('2d');
var chart = new Chart(chartId, chartTheme);

If you can figure out how to get .destroy() working correctly let me know! I would love to do it that way as well but couldn't figure it out for the life of me.

Fiddle here: https://jsfiddle.net/Lmp52046/1/

Upvotes: 0

Related Questions