For whatever reason, the arc's stroke-width isn't being taken into account when we redraw the SVG's bounding box. I even tried using this API for including stroke in the calculation but it doesn't seem to be working in Chrome.

getBBox({stroke: true})

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox#parameters

As a workaround, you can increase the gauge's padding to account for this, or allow overflow.

I'd like to request you a feature to add offset to needle.

Background

I'm using a gauge like component in one of our app and your hook was a perfect choice for that use case. But our designer suggested to add some spacing between the needle tip and upon checking the readme and the code I've found that there were no options to do this.

Solution

As as solution, I've added a PR to add the missing functionality, so the others can benefit from it as well. You can take a look at the open PR here.

Feel free to share your thoughts/suggestions, if any.

Lastly, thank you for this amazing hook!

I see from your screenshots that you've added the actual value below the gauge. But in the code there is no such label or svg <text> element.

How would I go about adding one?

hi!
I have issue in NextJS 13
this line:
{...gauge.getTickProps({ angle, length: showText ? 12 : 6 })}
in arced.tsx

this error:
Warning: A props object containing a "key" prop is being spread into JSX:
let props = {key: someKey, className: ..., strokeWidth: ..., x1: ..., x2: ..., y1: ..., y2: ...};
<line {...props} />
React keys must be passed directly to JSX without using spread:
let props = {className: ..., strokeWidth: ..., x1: ..., x2: ..., y1: ..., y2: ...};
<line key={someKey} {...props} />

Hey there again!

I'm working on a gauge that displays solar wind from 200 to 1000. I would love to be able to display 200, 300, 400, 500, 600, 700, 800, 900 and 1000 as ticks. But no matter what numTicks value I use, I always get result like this:

Is there any good solution to this? Would I need to adjust the startAngle and endAngle?

My understanding is that this hook makes it so that you can design/customize your svg gauge however you want - not as user friendly but very flexible.

I checked all the code and examples but couldn't find an example where the arch would be of a gradient instead of a single color.

How would you go about doing this in the best possible way? I suck at SVG bug but instead of doing fill="some color hex" I would use some sort of gradient attribute, e.g. gradient="fromvalue to value"?

I am working on a gauge that should move the needle smoothly. I was wondering if it would make more sense to use CSS transform to rotate the needle. That way one could enable transition on the transform for smooth rotation.

My current solution:

        <g
          id="needle"
          className={styles.needle}
          style={{
            transform: `rotate(${gauge.valueToAngle(value) - 90}deg)`,
          }}
        >
          <circle className={styles.needleBase} {...needle.base} r={12} />
          <circle className={styles.needleBase} {...needle.base} />
          <circle className={styles.needleTip} {...needle.tip} />
          <polyline className={styles.needlePoints} points={needle.points} />
          <circle className={styles.needleBase} {...needle.base} r={4} />
        </g>

CSS:

  .needle {
    transition: 0.2s ease-in-out;
  }

Then inside getNeedleProps I just hard-code the angle to 0.

For my use case this works beautifully.

Hey there. First of all, thank you for an excellent gauge hook for React, really appreciate it!

I've run into one issue where I'm showing solar KP index on a gauge. I have values ranging from 0 to 9. When the value is 8, the needle doesn't seem to point at the correct value.

Values such as 0, 5 and 9 seem to work fine.

Any clue what the issue could be? I've tried digging into the source code, removed all cases of Math.floor and Math.round, it looks a bit better but still obviously off.

Thank you.

Currently, there's only one needle shape – this weird thing where we connect a smaller circle ("tip") to a larger circle ("base") and fill in the rest with a polyline. It'd be cool if users could provide their own needle shape, be it an arrow, a straight line, etc.

I would like to display the min and max values under each corner of the arch like this (see the small 0 and 100 values under the arch on both left and right):

https://github.com/toorshia/justgage

How would I do the same with this plugin?