different behaviour between chrome and firefox with same dataset

[enlazoCtrl]

Would you like to work on a fix?

• Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

In actual scenario the app paint three accumulated bar charts, in vue 3, composition API so with same dataset wich is a three objects with this aspect:

export interface IItem {
labels: string[];
datasets: Dataset[];
}

export interface Dataset {
label: string;
data: number[];
barThickness: number;
borderRadius: number;
backgroundColor: string;
}

I'm also using a pivot library to accumulate the cpu consumption for a exact time in the same label of the chart
Example, I'll shorten the dataset array to make it simpler. The app recieve N numbers of datasets to paint ->

{
"labels": [
"09:15",
"09:20",
"09:25",
"09:35",
"09:40",
"09:45",
"09:55",
"10:05",
"10:10",
"10:15",
"10:20",
"10:25",
"10:40",
"11:00",
"11:05",
"11:10",
"11:15",
"11:20",
"11:25",
"10:30",
"10:35",
"10:45",
"10:50",
"10:55",
"07:00",
"07:05",
"07:55",
"08:00",
"08:05",
"08:15",
"08:20",
"08:25",
"08:35",
"08:40",
"07:10",
"07:15",
"07:20",
"07:25",
"07:30",
"07:35",
"07:40",
"07:45",
"07:50",
"08:10",
"08:30",
"08:45",
"08:50",
"08:55",
"09:00",
"09:05",
"09:10",
"09:30",
"09:50",
"10:00",
"06:35",
"06:40",
"06:50"
],
"datasets": [
{
"label": "mtr_definicion",
"data": [
509,
4,
18,
8,
7,
18,
8,
8,
2289,
26,
19,
6,
5,
5,
6,
12,
13,
13,
5,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"barThickness": 12,
"borderRadius": 5,
"backgroundColor": "#B1D1C9"
},
{
"label": "seg_usuario",
"data": [
0,
0,
0,
0,
0,
0,
0,
518,
10,
16,
51,
88,
21,
0,
0,
29,
37,
8,
15,
42,
17,
14,
12,
16,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"barThickness": 12,
"borderRadius": 5,
"backgroundColor": "#D2FC2F"
},
}
]
}

With these data google chrome display the charts with the expected values correctly the opposite of Mozilla Firefox that mix labels and display the chart with none sense, how this could be?, and how can I get the result of the chrome displaying the charts tha same way in avery browser?

charts in Mozilla :

charts in Chrome:

Reproduction

https://github.com/enlazoCtrl/charts here is the two vue classes that uses the charts

chart.js version

^4.3.1

vue-chartjs version

^5.2.0

Possible solution

No response