Solved : hovering over Chartjs Bar Chart showing old data

Thanks Very Very much 🙂
It woks!

Thank You so much,,, it is really working.

does not work on me im using it on angular 6

Thanks Bro

Hi Ajay Malhotra
I am using LIghtning component(Salesforce) and using

inside loop and getting same issue
and using ur code like below but solved 🙁

({
createGraph : function(cmp, temp, selectedObjectName, viewtype) {

var dataMap = {“chartLabels”: Object.keys(temp),
“chartData”: Object.values(temp)
};

var el = cmp.find(‘barChart’).getElement();
var ctx = el.getContext(‘2d’);

var myChart = new Chart(ctx, {
type: viewtype,
data: {
labels: dataMap.chartLabels,
datasets: [
{
label: selectedObjectName,
backgroundColor: “#3399ff”,
data: dataMap.chartData
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
// label formate for y axes
// callback: function(value, index, values) {
// return “U$ ” + (value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, ‘$&,’);
// }
max: 80,
autoSkip: false,
stacked: true
}
}] ,
xAxes: [{
gridLines: {
offsetGridLines: true
},
ticks: {
beginAtZero: true,
// label formate for y axes
// callback: function(value, index, values) {
// return “U$ ” + (value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, ‘$&,’);
// }
max: 80,
autoSkip: false,
stacked: true
}
}]
}
},
});

var ctxLine = document.getElementById(“barChart”).getContext(“2d”);
if(window.bar != undefined)
window.bar.destroy();
window.bar = new Chart(ctxLine, {});

}
})

hello bro i have same issue please me

Its not working for my code.
Anyone can help me?

I don’t really understand why window.bar works instead of origin chart name. Maybe it’s correlated to the source code of Chart.js? But anyway it works perfectly. Thanks man!

thank you so much, it works!!!!! I’m stuck 2 two days and many thanksss

Thanks a lot It works

hi ajay
my code is something different , in one dropdown onchange event I am binding the data, where there are 4 charts and i am dynamically handling using a tag.
for example i am sending 2 functions here..

getWSchartStandardData(tag:any){
const elem = document.getElementById(‘standardChart’);
const ctx:any = elem?.getContext(‘2d’);
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, ‘#0098b8’);
gradient.addColorStop(1, ‘#40afc9’);

////let datarr: any = [];
//let levarr: any = [];
this.levarr = this.stdlabelVal;
this.datarr = this.stdDataArr;

const datamin = Math.min(…this.datarr);
let min = (datamin – 5 < 0) ? 0 : Math.floor(datamin – 5);
let labelTag='';
let labelString='';
let unit:any;
if(tag==1){
labelTag = "Network Availability (Standard Data)";
labelString = "Percentage (%)";
unit = "%";
}
if(tag==2){
labelTag = "Jitter (Standard Data)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==3){
labelTag = "Latency (Standard Data)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==4){
labelTag = "Packet Delivery (Standard Data)";
labelString = "Percentage (%)";
unit = "%";
}
console.log(this.levarr)
console.log(this.datarr)
this.chart = new Chart(ctx, {
type: 'bar', //this denotes tha type of chart

data: {// values on X-Axis
labels: this.levarr,
datasets: [
{
label: labelTag,
data: this.datarr,
backgroundColor: gradient
}
]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
// beginAtZero:true,
precision: 0,
min: min,
maxTicksLimit: Math.max(…this.datarr)
},
display: true,
scaleLabel: {
display: true,
labelString: labelString,
},
}],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Months",
},
},
],
}
}
});
}

getWSchartRealTime(tag:any){
const elem = document.getElementById(‘realtimeChart’);
const ctx:any = elem?.getContext(‘2d’);
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, ‘#0098b8’);
gradient.addColorStop(1, ‘#40afc9’);

////let datarr: any = [];
//let levarr: any = [];
this.levarr = this.rTlabelVal;
this.datarr = this.rTDataArr;

const datamin = Math.min(…this.datarr);
let min = (datamin – 5 < 0) ? 0 : Math.floor(datamin – 5);
let labelTag='';
let labelString='';
let unit:any;
if(tag==1){
labelTag = "Network Availability (Real Time)";
labelString = "Percentage (%)";
unit = "%";
}
if(tag==2){
labelTag = "Jitter (Real Time)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==3){
labelTag = "Latency (Real Time)";
labelString = "Milliseconds (ms)";
unit = "ms";
}
if(tag==4){
labelTag = "Packet Delivery (Real Time)";
labelString = "Percentage (%)";
unit = "%";
}
this.chart = new Chart(ctx, {
type: 'bar', //this denotes tha type of chart

data: {// values on X-Axis
labels: this.levarr,
datasets: [
{
label: labelTag,
data: this.datarr,
backgroundColor: gradient
}
]
},
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
// beginAtZero:true,
precision: 0,
min: min,
maxTicksLimit: Math.max(…this.datarr)
},
display: true,
scaleLabel: {
display: true,
labelString: labelString,
},
}],
xAxes: [
{
scaleLabel: {
display: true,
labelString: "Months",
},
},
],
}
}
});
}

i use ngdestroy
ngOnDestroy() {
if(this.chart!=undefined && this.chart!=null)
this.chart.destroy();
}

the destroy is not working properly … as no data is showing after that .
any help please..thank you