chartjs / chartjs/Chart.js

Bug - Tooltips are possibly breaking down for some reason, it happens sometimes

Open
#12,173 0 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

Graph working correctly

### Current behavior

chart.js: ^2.9.3
typescript: ~3.4.3
@angular/core: ~8.0.3

Hi guys, has anyone seen or getting this trouble ? I'm using the scatterChart and sometimes are getting the behavior of the image below and i'm already test pass to the fields NaN, null, undefined and did not reproduce the error.

Image

It seen's that the error is on tooltips, because as you can see the text only have to bee shown on hover, as we can't reprocuce locally i dont know if has some error in console.

Interesting fact is that he overrides the text of x and y, as in the secund image, i have a description text and when heppends he shows x and y.

Image

graph working

Image

Actual implementation
```
public scatterChartOptions: (ChartOptions & { annotation: any }) = {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
let dataset = data.datasets[tooltipItem.datasetIndex];
let item = dataset.data[tooltipItem.index];
let txt: string[] = [];
txt.push("Total Produzido: " + item['y']);
txt.push("Quantidade dias: " + item['x']);
txt.push("Identificador: " + item['identificador']);
txt.push("Nome: " + item['nome']);
return txt;
}
}
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: '40',
borderColor: 'red',
borderWidth: 2
},
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: '20',
borderColor: 'red',
borderWidth: 2
}],
},
elements:{
point:{
pointStyle: 'triangle',
}
},
responsive: true,
scales: {
xAxes: [{
ticks: {
min: 0,
max: 700,
stepSize: 100,
},
scaleLabel: {
display: true,
labelString: "DIAS"
}

}],
yAxes: [{
ticks: {
max: 80,
min: 0,
stepSize: 5,
},
scaleLabel:{
display: true,
labelString: "KG/DIA"
}
}]
},
};
```

### Reproducible sample

https://codepen.io/

### Optional extra steps/info to reproduce

_No response_

### Possible solution

_No response_

### Context

_No response_

### chart.js version

^2.9.3

### Browser name and version

Chrome

### Link to your project

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.