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

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.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>


	<style>
		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%;
		}
	</style>
</head>
<body>
	<div class="chart-container" id="chart-container" style="text-align:center;">
		<canvas id="chart" style="display: inline-block;"></canvas>
	</div>


	<script>
		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',
						},
					},
				},
			},
		});
		</script>
	</body>
</html>

Some explainations for this?

P.S. I added the plugin https://cdn.jsdelivr.net/npm/[email protected] 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

Jan 04 '25 20:01 GitCatacao

I guess this is a firefox issue for macos. When I run this locally on my windows machine it is fast in both chrome and firefox latest versions.

Jan 04 '25 21:01 LeeLenaleee

@LeeLenaleee I already told you it was for firefox and macos machine. I haven't tried it on windows. With all due respect, but you are not telling me anything new. I also told you it worked fine on chrome and safari. Again...same as above!

Anyway ❤️. At least someone who answers every now and then.

Jan 04 '25 21:01 GitCatacao

You indeed said you only tested it on a macos machine. So I tried to see if it also happend on windows. Since it does not happen on Firefox windows, chrome windows and mac and safari this does not seem to be a chart.js issue but some issue in firefox instead

Jan 04 '25 23:01 LeeLenaleee

@LeeLenaleee

Thanks for the observation. But it only happens for chat.js and not for other libraries (let's say I've already tested more than one...) with roughly the same amount of data. Not only that, but I want to point out that it only happens with offset setting on false. Which means that this element is the one that slows down. Then whether it's MacOS machine, Windows or Alien OS it doesn't matter.

It weighs down Firefox a lot. I had read somewhere (don't ask me where) that Chrome and Safari have a larger memory reserved for the user then Firefox.

All this to say that if you streamlined this part on the next version it would be much better.

Bye and good work.

Jan 05 '25 00:01 GitCatacao