Home Chartjs Solved : hovering over Chartjs Bar Chart showing old data

Solved : hovering over Chartjs Bar Chart showing old data

by therichpost
Published: Last Updated on 56 comments
chartjs-in-angular6

Hello to all, welcome to the therichpost.com. In this I will tell you how to Solved : hovering over Chartjs Bar Chart showing old data? Chartjs is the very popular for barchart, line chart and many more. I was facing one problem during working with chartjs. When I change my chartjs bar chart event then hover again, It was showing me old data and this was the big issue for me but I am able to solved this and today I am sharing that code with all of you. Here is the code for solved hovering over Chartjs Bar Chart showing old data:

var ctxLine = document.getElementById("line-chart").getContext("2d");
if(window.bar != undefined) 
window.bar.destroy(); 
window.bar = new Chart(ctxLine, {});

 

There are so many tricky code in Chartjs and I will let you know all. Please do comment if you any query related to this post. Thank you. Therichpost.com

You may also like

56 comments

Navid Arfaie March 25, 2018 - 10:52 am

Thanks Very Very much 🙂
It woks!

Reply
therichpost March 25, 2018 - 5:41 pm

your welcome..

Reply
Neeraj September 7, 2019 - 8:53 am

Thanks , solved my problem !

Reply
Ishan May 4, 2018 - 5:14 am

Thanks. Please tell me what does window.bar perform ?

Reply
therichpost May 4, 2018 - 2:25 pm

If the variable is defined outside a function then its most immediate execution context is the global context which in web browsers is the window object;
// note that the following doesn’t throw an error
console.log(bar) // undefined
console.log(window.bar) // undefined
console.log(window.hasOwnProperty(‘bar’)) // true

Reply
ABHISHEK NEGI May 12, 2021 - 12:29 am

I am using chart control and getting same error, can you tell me the way where to add this code of line in a function or in the render method

Reply
Sachin May 5, 2018 - 7:27 am

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

Reply
therichpost May 5, 2018 - 4:38 pm

you’re most welcome 🙂

Reply
Cher August 22, 2018 - 7:22 am

Thank you So Much!

Reply
Ajay Malhotra August 22, 2018 - 8:15 am

most welcome!!

Reply
Jayson August 23, 2018 - 4:58 am

does not work on me im using it on angular 6

Reply
Ajay Malhotra August 23, 2018 - 6:09 am

HI Jayson, can you send me code, I need to check once..Angular code?

Reply
Max October 9, 2018 - 9:10 am

My Angular has no Idea what windows.bar should be and me either.
How I get it working?

Reply
Max October 9, 2018 - 9:34 am

I got it

Reply
Dharmansh October 25, 2018 - 9:47 am

how did it worked ? I am facing the same issue and am using angular 6

Reply
Ajay Malhotra October 25, 2018 - 2:53 pm

Hi, Dharmansh, can you check this:
https://therichpost.com/solved-hovering-over-chartjs-bar-chart-showing-old-data-in-angular

======================
Tell me if it solve you issue.

Reply
tukaram jahdav October 7, 2019 - 6:50 am

i have same problem please help me

Reply
Ajay Malhotra October 7, 2019 - 6:53 am

Please tell me the problem

Reply
anik December 7, 2018 - 11:22 pm

I have two chats ( line chart and bar chart). for line chart, I have already used window.bar but for the bar chart window.bar does not work.

Reply
Ajay Malhotra December 8, 2018 - 5:37 pm

It will work and can you me show you code?

Reply
Surabhi Sugandha February 1, 2021 - 10:31 am

Same issue with me, how to make window.bar work for both the charts

Reply
nini December 18, 2018 - 2:08 pm

how to use this code, i have initial data and ajax call data.

Reply
Ajay Malhotra December 19, 2018 - 4:23 am

Same, when you will add your chart code then add above code.

Reply
alagar January 22, 2019 - 5:28 pm

Thanks Bro

Reply
Ajay Malhotra January 23, 2019 - 4:19 pm

Your welcome..

Reply
omar March 11, 2019 - 11:56 am

very very thanks more

Reply
Prashant Sontale August 5, 2019 - 11:38 am

I am also facing the same Problem of hovering and showing old data. I tried using your code but it shows the old data on hovering.

Below is my code

$(document).ready(function () {

$(‘#search’).on(‘click’, function () {

var district=$(‘#district’).val();

$.ajax({
url: “index.php?r=dashboard/groups&district1=”+district,
method: “GET”,
dataType: “json”,
success: function(data) {

console.log(data);
var district3 = [];
var groups3 = [];

for(var i in data) {
district3.push(” ” +data[i].District);
groups3.push(data[i].Groups);
}

var chartdata = {
labels: district3,
datasets : [
{
label: ‘Groups’,
backgroundColor: ‘skyblue’,
borderWidth:1,
data: groups3
}
]
};

var ctx = document.getElementById(“district_wise_group_1″);

var barGraph = new Chart(ctx, {
type: ‘bar’,
data: chartdata,

options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1

},

}],
xAxes: [{
barPercentage: 0.1
}]
},
title: {
display: true,
text: ‘District wise Groups’,
fontSize:15,
fontColor:”black”,
fontStyle:”bold”
}

},

});

if(window.bar != undefined)
window.bar.destroy();
window.bar = new Chart(ctx, {});

},
error: function(data) {
console.log(data);
}

});

});

$(‘#reset’).on(‘click’, function () {

$.ajax({
url: “index.php?r=dashboard/grouprecords”,
method: “GET”,
dataType: “json”,
success: function(data) {

console.log(data);
var district3 = [];
var groups3 = [];

for(var i in data) {
district3.push(” ” +data[i].District);
groups3.push(data[i].Groups);
}

var chartdata = {
labels: district3,
datasets : [
{
label: ‘Groups’,
backgroundColor: ‘skyblue’,
borderWidth:1,
data: groups3
}
]
};

var ctx = document.getElementById(“district_wise_group_1″);

var barGraph = new Chart(ctx, {
type: ‘bar’,
data: chartdata,

options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
stepSize: 1

},

}],
xAxes: [{
barPercentage: 0.1
}]
},
title: {
display: true,
text: ‘District wise Groups’,
fontSize:15,
fontColor:”black”,
fontStyle:”bold”
}

},

});

},
error: function(data) {
console.log(data);
}

});

});

});

Reply
Ajay Malhotra August 5, 2019 - 4:19 pm

I think, you are you using it wrong way. Please check my code again carefully.

thank you

Reply
Neeraj September 7, 2019 - 8:55 am

Thanks , solved my problem !

Reply
Vijay October 14, 2019 - 10:40 am

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, {});

}
})

Reply
Ajay Malhotra October 14, 2019 - 4:41 pm

Inside loop and there are one chart or multiple charts?

Reply
brahim belkaz December 13, 2019 - 7:50 pm

thank you so much .

Reply
Ajay Malhotra December 15, 2019 - 7:35 am

you are welcome.

Reply
tukaram jadhav January 3, 2020 - 6:50 am

hello bro i have same issue please me

Reply
Ajay Malhotra January 3, 2020 - 4:15 pm

Did you use my code?

Reply
Andres January 15, 2020 - 7:43 pm

Thank you! it worked like a charm but for anyone out there that wasn’t sure on how to use it, in my case I had a function that took data as a parameter from an ajax call and inside that function I created my chart(Doughnut) so I simply replaced my old code:

function loadTimelineEntriesCreatedByUserChart(data){
// I processed data here…
var ctx = $(“#timeline-created-by-user”).get(0).getContext(“2d”);
var myChart = new Chart(ctx, {
type: ‘doughnut’,
data: {
labels: theLabelsTop5,
datasets: [{
label: ‘# of Votes’,
data: theDataTop5,
backgroundColor: dynamicColors(),
borderColor: dynamicColors(),
borderWidth: 1
}]
},
options: {
responsive: false,
legend: {
position: ‘right’,
labels: {
boxWidth: 12
}
}
}
});
}

to :
function loadTimelineEntriesCreatedByUserChart(data){
// I processed data here…
var ctx = $(“#timeline-created-by-user”).get(0).getContext(“2d”);

if(this.chartTCBU != undefined){
window.chartTCBU.destroy();
}
window.chartTCBU = new Chart(ctx, {
type: ‘doughnut’,
data: {
labels: theLabelsTop5,
datasets: [{
label: ‘# of Votes’,
data: theDataTop5,
backgroundColor: dynamicColors(),
borderColor: dynamicColors(),
borderWidth: 1
}]
},
options: {
responsive: false,
legend: {
position: ‘right’,
labels: {
boxWidth: 12
}
}
}
});
}

Reply
Ajay Malhotra January 16, 2020 - 3:23 pm

Good job 🙂

Reply
OdooS January 27, 2020 - 6:48 am

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

Reply
Ajay Malhotra April 27, 2020 - 5:06 am

Please tell me..

Reply
Rajitha Gamage January 28, 2020 - 9:11 am

Thanks brother it’s reallly working

Reply
Ajay Malhotra April 27, 2020 - 5:06 am

Welcome…

Reply
Ethan April 26, 2020 - 8:30 pm

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!

Reply
Ajay Malhotra April 27, 2020 - 5:07 am

You are welcome.

Reply
Sreerup Karmakar May 25, 2020 - 5:29 pm

My intention is to update the chart on change of radio button. Can you help me where should I make the changes, as I followed your solution but not working. Here is the link to the code https://www.codepile.net/pile/G7rroN7Q

Reply
Ajay Malhotra May 26, 2020 - 4:59 am

Hi I will check and update you.
Thanks

Reply
YenNhiTran December 7, 2020 - 4:06 am

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

Reply
Ajay Malhotra December 7, 2020 - 11:40 am

Welcome and great.

Reply
dubesh shrestha December 29, 2020 - 8:46 am

Thank you so much.. really Nice…

Reply
Ajay Malhotra December 29, 2020 - 9:03 am

Welcome.

Reply
Ashutosh February 25, 2021 - 4:29 am

Thanks a lot It works

Reply
Ajay Malhotra February 25, 2021 - 7:44 am

Great.

Reply
Hari August 9, 2021 - 9:56 pm

Thank you so so much..it worked!!

Reply
Ajay Malhotra August 10, 2021 - 3:51 am

Great and welcome.

Reply
laxmi mohanty December 27, 2022 - 12:15 pm

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

Reply
therichpost December 27, 2022 - 12:18 pm

Hi I got your point. Your data is coming from API but your chart init first so it is showing no data.

Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.