Skip to content

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

@a-andrade-nextage

Description

@a-andrade-nextage

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions