Hey there again! I'm working on a gauge that displays solar wind fro

Hard time using ticks and certain values for label about use-gauge HOT 4 CLOSED

raRaRa commented on May 30, 2024

Hard time using ticks and certain values for label

from use-gauge.

Comments (4)

raRaRa commented on May 30, 2024

Setting numTicks to 5 works, I guess because it can divide the numbers evenly, but that gives me too few ticks.

from use-gauge.

mattrothenberg commented on May 30, 2024

You'll likely need to change the implementation of this function.

use-gauge/src/lib.ts

Lines 5 to 17 in cf4c901

 export const makeTickMarks = ( 

 minAngle: number, 

 maxAngle: number, 

 numTicks: number 

 ) => { 

 const tickMarks = []; 

 const angleRange = maxAngle - minAngle; 

 const angleStep = angleRange / (numTicks - 1); 

 for (let i = 0; i < numTicks; i++) { 

 tickMarks.push(Math.floor(minAngle + i * angleStep)); 

 } 

 return tickMarks.reverse(); 

 };

I'd welcome a PR that exposes a prop for a custom tick formatter function.

from use-gauge.

raRaRa commented on May 30, 2024

Hmm I managed to find a solution that works. So basically I put an offset of 2 to the startAngle and endAngle, so 90-2 and 270+2, that seems to hit the sweet spot

from use-gauge.

raRaRa commented on May 30, 2024

I don't think there's any "easy fix" to solve this. But perhaps you could instead show a demo on how to solve edge cases like these, e.g. with the offset trick. I'm closing this issue for now and will open another one if I figure something later.

from use-gauge.

Recommend Projects

Hard time using ticks and certain values for label about use-gauge HOT 4 CLOSED

Comments (4)

Related Issues (11)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	export const makeTickMarks = (
	minAngle: number,
	maxAngle: number,
	numTicks: number
	) => {
	const tickMarks = [];
	const angleRange = maxAngle - minAngle;
	const angleStep = angleRange / (numTicks - 1);
	for (let i = 0; i < numTicks; i++) {
	tickMarks.push(Math.floor(minAngle + i * angleStep));
	}
	return tickMarks.reverse();
	};