Hi, I would like to completely remove the label (gauge name). Is it possible?

Thank you very much.

Have way to change color in valueFormatter prop?

I change to pass style but only works fontSize and fontFamily.

` valueLabelStyle ={{
fontSize:100,
fontFamily:'Arial',
color:'blue'

        }}`

Hey man, we're trying to use your NPM module in our project and it doesn't have the new Symbol code (we want to add a "%" to the text) and was wondering if you could just update the project.

Thanks!

If the provided value exceeds the min and max values the gauge renders incorrectly, could possibly be improved by rendering it as completely full or empty, eg. quick fix: const value = data >= min && data <= max ? data : data < min ? min : max

It would be great if anyone can add these types to the project.

declare module "react-svg-gauge" { 
  import { Component, CSSProperties } from "react";
 
  export interface IGaugeProps {
    label?: string;
    max?: number;
    min?: number;
    value?: number;
    width?: number;
    height?: number;
    color?: string;
    backgroundColor?: string;
    topLabelStyle?: CSSProperties;
    valueLabelStyle?: CSSProperties;
    minMaxLabelStyle?: CSSProperties;
  }

  export class Gauge extends Component<IGaugeProps> {  
    public render(): JSX.Element;
  }
  
  export default Gauge;
}

Hello @Reggino could you please clarify the license of your project by adding a LICENSE file?
The lack of that information will prevent potential users from using your component.

Tim,

I think you would remove lib from gitignore because that is used while importing your module into the project otherwise, I would need to compile the code into lib using your package.json to use your module.

Regards,
Haider

@Reggino I see you made a commit last year that fixes the react version issues. Any chance you can publish that package on NPM?

I want to add the line over the guage. How do I do it ?

Screenshot is attached here

Need your help

How would I go about removing the extra whitespace around the gauge?

I am trying to remove the space around the gauge so that the gauge (and min/max number) takes up the full width and height of the SVG.

Whitespace can be seen here:

You can see that the gauge is not centered vertically/horizontally. I have different use cases making the gauge bigger, which seems to alleviate some of the problem. Which can be seen below:

I have tried poking around with the Xo, Xi, Yo, Yi params to no avail. Is there some sort of width/height ratio that could solve this? Such as:

gaugeWidth - 100;
gaugeHeight = gaugeWidth * 0.6666667;

Ideally, I would like the gauge paths to start/end at the left/right/top/bottom most borders of the overall SVG.

Any help would be greatly appreciated and thanks for the hard work already!

Tim,

Please see attached image of the gauge. I was able to adjust the width and also add gradiant. However, I was working directly on lib/gauge.js. I have added those changes to src but I am not able to compile into lib. Please tell what command do you use from scripts to make a new lib folder?

Hi,

Please tell if we can change the gauge color to gradient like in attached screenshot

Can we know the position of value so we can position the label at that point?

Tim,
When I ran the Gauge chart in my chrome, I got warnings in developer console. Please see the warnings in screenshot attached. The React version I am using is 15.2.0

Regards,
Haider

can i modify number with text render ?

bad , normal, good ?

For example

I want to know if there is a way to change the text of max value like this. I tried to change a max value, but the gauge will disappear if the max is 0.

I would appreciate it if you have a way to do that. Thanks!

JustGage supports modifying labels displayed for minimum and maximum values via minTxt and maxTxt properties. But they are not supported by this library.

It requires a small change but I think it brings a good feature.

How can I easily set the arc width ?

It would be cool to have an option.

:)

Since React 16 is released, this project should upgrade to match to remove any peer dependency warnings.