CODEWITHSUNDEEP
javascriptjquerychart.js
code-8
code-8

Reputation: 58642

ChartJS show jittering on hover

I am using chartJS

Try#1

var ctx = document.getElementById(configs.selectorId).getContext('2d');
// chart.destroy();
var chart = new Chart(ctx, options);

Try#2

var ctx = document.getElementById(configs.selectorId).getContext('2d');
var chart = new Chart(ctx, options);
chart.update();

Try#3

var ctx = document.getElementById(configs.selectorId).getContext('2d');
window[configs.selectorId] = new Chart(ctx, options);
window[configs.selectorId].update();

Try#4

if(window[configs.selectorId] && window[configs.selectorId] !== null){
    window[configs.selectorId] = []
}

var ctx = document.getElementById(configs.selectorId).getContext('2d');
window[configs.selectorId] = new Chart(ctx, options);

Try#6

if(window[configs.selectorId] && window[configs.selectorId] !== null){

    // console.log(window[configs.selectorId]);
    delete window[configs.selectorId];
}

console.log(window);

var ctx = document.getElementById(configs.selectorId).getContext('2d');
window[configs.selectorId] = new Chart(ctx, options);
window[configs.selectorId].update();

Try#6

$('canvas').html("");

before call my chart

Please advise on how to do that.

I reproduce it here : http://bheng-charts-demo.herokuapp.com/

Upvotes: 1

Views: 332

Answers (1)

Sergey Mell
Sergey Mell

Reputation: 8040

As long as you are using new Chart() constructor, accoding to the documentation destroy method should be called before the canvas is reused for a new chart.

In your case it should work as follows

if(window[configs.selectorId] && window[configs.selectorId] !== null){

    if (typeof window[configs.selectorId].destroy === 'function') {
        window[configs.selectorId].destroy();
    }
    delete window[configs.selectorId];
}

Here is a snippet I've created on the basis of your code: https://codepen.io/sergey_mell/pen/qBdBVpe I've just changed your random data API to locally random generated data

Please, let me know if my answer is not clear enough or you need some additional information

Upvotes: 2

Related Questions