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

Price label rendering artefacts #1584

Closed
SlicedSilver opened this issue May 8, 2024 · 0 comments · Fixed by #1585
Closed

Price label rendering artefacts #1584

SlicedSilver opened this issue May 8, 2024 · 0 comments · Fixed by #1585
Assignees
@SlicedSilver
Labels
bug Unexpected problem or unintended behavior.
Milestone
4.1.x

Comments

@SlicedSilver
Copy link
Contributor

Lightweight Charts™ Version: 4.1.3

Steps/code to reproduce:

  • Open attached code in chrome with 200% zoom

Actual behavior:

The filled area of the price label has a slight rendering artefact near the corners

Expected behavior:

The filled area should appear solid.

Screenshots:

Visual artefacts scale label

Code Sample:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<title>Debug page</title>
	<script type="text/javascript" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
</head>
<body style="padding: 0; margin: 50px;">
	<div id="container" style="width: 600px; height: 400px; position: relative"></div>
	<script type="text/javascript">

		var chart = LightweightCharts.createChart(
			document.getElementById('container'),
		);

		const data = Array.from({length: 100}).map((_, index) => ({ time: index * 10000, value: index % 10 === 0 ? index : undefined }) );

		const series = chart.addLineSeries();
		series.setData(data);

		chart.timeScale().fitContent();

		series.createPriceLine({
		    price: 70.0,
		    color: 'gray',
		    lineWidth: 1,
		    lineStyle: LightweightCharts.LineStyle.Dashed,
		    title: 'Dashed',
		});

		series.createPriceLine({
		    price: 50.0,
		    color: 'gray',
		    lineWidth: 1,
		    lineStyle: LightweightCharts.LineStyle.LargeDashed,
		    title: 'LargeDashed',
		});

		series.createPriceLine({
		    price: 30.0,
		    color: 'gray',
		    lineWidth: 1,
		    lineStyle: LightweightCharts.LineStyle.Dotted,
		    title: 'Dotted',
		});

		series.createPriceLine({
		    price: 10.0,
		    color: 'gray',
		    lineWidth: 1,
		    lineStyle: LightweightCharts.LineStyle.SparseDotted,
		    title: 'SparseDotted',
		});
	</script>
</body>
</html>
@SlicedSilver SlicedSilver added the bug Unexpected problem or unintended behavior. label May 8, 2024
@SlicedSilver SlicedSilver added this to the 4.1.x milestone May 8, 2024
@SlicedSilver SlicedSilver self-assigned this May 8, 2024
@SlicedSilver SlicedSilver mentioned this issue May 8, 2024
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@SlicedSilver SlicedSilver

Labels
bug Unexpected problem or unintended behavior.
Projects
None yet
Milestone
4.1.x
Development

Successfully merging a pull request may close this issue.

fix rendering glitch with drawRoundRectWithInnerBorder tradingview/lightweight-charts
1 participant
@SlicedSilver