[BUG] Mozilla Firefox 133 - Chart slows down indescribably when using offset = false for big data
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
### Expected behavior
Chart slows down indescribably when using offset = false for big data, but works good and fast when there's offset = true over Mozilla Firefox.
It works good on Chrome and Safari.
### Current behavior
Here a sample.
**Do not use a JSfiddle. The absurd thing is that in jsfiddle works quickly in both situations (also in firefox).**
So, save it as a page and open it in Mozilla Firefox or Firefox Developer.
This has been tried on my PC (a powerful pc) on Mozilla Firefox without plugins.
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.chart-container {
position: relative;
width: 90%;
height: 500px;
background-color: black;
color: white;
}
#chart {
width: 100%;
}
const ctx = document.getElementById('chart').getContext('2d');
let data = [];
let data2 = [];
function generateRandomData(numPoints) {
let currentDate = new Date();
for (let i = 0; i < numPoints; i++) {
const rand_plus_or_minus = Math.round(Math.random()) * 2 - 1;
const y = Math.random() * 100 + 50;
const y2 = Math.random() * 100 + 50;
new_date = parseInt(currentDate.getTime()/1000)*1000 + i * 24 * 60 * 60 * 1000;
data.push({
x: new_date,
y: y,
});
data2.push({
x: new_date,
y: y2,
});
}
return data;
}
var rawData = generateRandomData((365*30));
const chart = new Chart(ctx, {
type: 'candlestick',
data: {
datasets: [
{
type: 'line',
label: 'Dataset 1',
data: data,
borderColor: 'orange',
backgroundColor: 'orange',
borderWidth: 1,
fill: false,
pointStyle: 'circle',
hoverRadius: 5,
},
{
type: 'line',
label: 'Dataset 2',
data: data2,
borderColor: 'lime',
backgroundColor: 'lime',
borderWidth: 1,
fill: false,
pointStyle: 'circle',
hoverRadius: 5,
},
],
},
options: {
animation: false,
responsive: true,
maintainAspectRatio: false,
elements: {
point:{
radius: 0
},
},
plugins: {
tooltip: {
mode: 'index',
intersect: false,
enabled: true,
},
},
interaction: {
mode: 'index',
intersect: false,
},
scales: {
x: {
type: 'linear',
title: {
display: true,
text: 'X Axis',
},
// TRY TO CHANGE THIS AND YOU SEE THE DIFFERENCES
offset: true,
//offset: false,
},
y: {
title: {
display: true,
text: 'Y Axis',
},
},
},
},
});
```
Some explainations for this?
P.S. I added the plugin https://cdn.jsdelivr.net/npm/chartjs-chart-financial@0.2.0 also if in this contest it's not used.
The reason I did this is that it adds lateral offsets by default.
### Optional extra steps/info to reproduce
TESTED ONLY ON MACOS SONOMA
### chart.js version
4.4.1
### Browser name and version
MOZILLA FIREFOX
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.