Solved : hovering over Chartjs Bar Chart showing old data

January 24, 2018

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

Comments

56 responses to “Solved : hovering over Chartjs Bar Chart showing old data”

March 25, 2018

Navid Arfaie

Thanks Very Very much 🙂
It woks!

Reply
1. March 25, 2018
  
  therichpost
  
  your welcome..
  
  Reply
2. September 7, 2019
  
  Neeraj
  
  Thanks , solved my problem !
  
  Reply
May 4, 2018

Ishan

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

Reply
1. May 4, 2018
  
  therichpost
  
  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
  1. May 12, 2021
    
    ABHISHEK NEGI
    
    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
May 5, 2018

Sachin

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

Reply
1. May 5, 2018
  
  therichpost
  
  you’re most welcome 🙂
  
  Reply
August 22, 2018

Cher

Thank you So Much!

Reply
1. August 22, 2018
  
  Ajay Malhotra
  
  most welcome!!
  
  Reply
August 23, 2018

Jayson

does not work on me im using it on angular 6

Reply
1. August 23, 2018
  
  Ajay Malhotra
  
  HI Jayson, can you send me code, I need to check once..Angular code?
  
  Reply
October 9, 2018

Max

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

Reply
1. October 9, 2018
  
  Max
  
  I got it
  
  Reply
  1. October 9, 2018
    
    Ajay Malhotra
    
    check this:
    https://therichpost.com/solved-hovering-over-chartjs-bar-chart-showing-old-data-in-angular
    
    Reply
  2. October 25, 2018
    
    Dharmansh
    
    how did it worked ? I am facing the same issue and am using angular 6
    
    Reply
    1. October 25, 2018
      
      Ajay Malhotra
      
      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
2. October 7, 2019
  
  tukaram jahdav
  
  i have same problem please help me
  
  Reply
  1. October 7, 2019
    
    Ajay Malhotra
    
    Please tell me the problem
    
    Reply
December 7, 2018

anik

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
1. December 8, 2018
  
  Ajay Malhotra
  
  It will work and can you me show you code?
  
  Reply
  1. February 1, 2021
    
    Surabhi Sugandha
    
    Same issue with me, how to make window.bar work for both the charts
    
    Reply
December 18, 2018

nini

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

Reply
1. December 19, 2018
  
  Ajay Malhotra
  
  Same, when you will add your chart code then add above code.
  
  Reply
January 22, 2019

alagar

Thanks Bro

Reply
1. January 23, 2019
  
  Ajay Malhotra
  
  Your welcome..
  
  Reply
March 11, 2019

omar

very very thanks more

Reply
August 5, 2019

Prashant Sontale

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
1. August 5, 2019
  
  Ajay Malhotra
  
  I think, you are you using it wrong way. Please check my code again carefully.
  
  thank you
  
  Reply
September 7, 2019

Neeraj

Thanks , solved my problem !

Reply
October 14, 2019

Vijay

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
1. October 14, 2019
  
  Ajay Malhotra
  
  Inside loop and there are one chart or multiple charts?
  
  Reply
December 13, 2019

brahim belkaz

thank you so much .

Reply
1. December 15, 2019
  
  Ajay Malhotra
  
  you are welcome.
  
  Reply
January 3, 2020

tukaram jadhav

hello bro i have same issue please me

Reply
1. January 3, 2020
  
  Ajay Malhotra
  
  Did you use my code?
  
  Reply
January 15, 2020

Andres

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
1. January 16, 2020
  
  Ajay Malhotra
  
  Good job 🙂
  
  Reply
January 27, 2020

OdooS

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

Reply
1. April 27, 2020
  
  Ajay Malhotra
  
  Please tell me..
  
  Reply
January 28, 2020

Rajitha Gamage

Thanks brother it’s reallly working

Reply
1. April 27, 2020
  
  Ajay Malhotra
  
  Welcome…
  
  Reply
April 26, 2020

Ethan

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
1. April 27, 2020
  
  Ajay Malhotra
  
  You are welcome.
  
  Reply
May 25, 2020

Sreerup Karmakar

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
1. May 26, 2020
  
  Ajay Malhotra
  
  Hi I will check and update you.
  Thanks
  
  Reply
December 7, 2020

YenNhiTran

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

Reply
1. December 7, 2020
  
  Ajay Malhotra
  
  Welcome and great.
  
  Reply
December 29, 2020

dubesh shrestha

Thank you so much.. really Nice…

Reply
1. December 29, 2020
  
  Ajay Malhotra
  
  Welcome.
  
  Reply
February 25, 2021

Ashutosh

Thanks a lot It works

Reply
1. February 25, 2021
  
  Ajay Malhotra
  
  Great.
  
  Reply
August 9, 2021

Hari

Thank you so so much..it worked!!

Reply
1. August 10, 2021
  
  Ajay Malhotra
  
  Great and welcome.
  
  Reply
December 27, 2022

laxmi mohanty

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
1. December 27, 2022
  
  therichpost
  
  Hi I got your point. Your data is coming from API but your chart init first so it is showing no data.
  
  Reply