chartjs / chartjs/Chart.js

[BUG] Mozilla Firefox 133 - Chart slows down indescribably when using offset = false for big data

Open
#11,990 4 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

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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.