Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
GitCatacao opened this issue Jan 4, 2025 · 4 comments
Open

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

GitCatacao opened this issue Jan 4, 2025 · 4 comments
Labels
type: bug

Comments

@GitCatacao
Copy link

GitCatacao commented Jan 4, 2025 •
edited
Loading

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
@GitCatacao GitCatacao changed the title [BUG] Mozilla Firefox 134 - Chart slows down indescribably when using offset = false for big data [BUG] Mozilla Firefox 133 - Chart slows down indescribably when using offset = false for big data Jan 4, 2025
@LeeLenaleee
Copy link
Collaborator

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.

@GitCatacao
Copy link
Author

GitCatacao commented Jan 4, 2025 •
edited
Loading

@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.

@LeeLenaleee
Copy link
Collaborator

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

@GitCatacao
Copy link
Author

GitCatacao commented Jan 5, 2025 •
edited
Loading

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@LeeLenaleee @GitCatacao