This library is great, but it was a struggle to get going with TS. Here is what I have so far:

declare module 'svg-gauge' {
  export interface Instance {
    setMaxValue: (max: number) => void
    setValue: (val: number) => void
    setValueAnimated: (val: number, duration: number) => void
    getValue: () => number
  }

  export interface Opts {
    viewBox: string
    /**
     * The angle in degrees to start the dial
     * @default 135
     */
    dialStartAngle?: number
    /** The angle in degrees to end the dial. This MUST be less than dialStartAngle
     * @default 45
     */
    dialEndAngle?: number
    /** The radius of the gauge
     * @default 40
     */
    radius?: number
    /** The minimum value for the gauge. This can be a negative value
     * @default 0
     */
    min?: number
    /** The maximum value for the gauge
     * @default 100
     */
    max?: number
    /** Getter for the label that will be rendered in the center. */
    label?: (currentValue: number) => string
    /** Whether to show the value at the center of the gauge
     * @default true
     */
    showValue?: boolean
    /** 	The CSS class of the gauge
     * @default 'gauge'
     */
    gaugeClass?: string
    /** The CSS class of the gauge's dial
     * @default 'dial'
     */
    dialClass?: string
    /** The CSS class of the gauge's fill
     * @default 'value'
     */
    valueDialClass?: string
    /** The CSS class of the gauge's text
     * @default '(value-text)'
     */
    valueClass?: string
    /**
     * An optional function that can return a color for current value
     */
    color?: (currentValue: number) => string
    /** An optional string that specifies the crop region
     * @default '(0 0 100 100)'
     */
    viewBox?: string
  }

  export = (element: HTMLDivElement, props: Partial<Opts>) => Instance
}

Then for usage, the provided React example converted to use these types

import React, { FC, useEffect, useRef } from 'react'
import SvgGauge, { Opts, Instance } from 'svg-gauge'

const defaultOptions: Partial<Opts> = {
  max: 100
}

const Gauge: FC<{ value: number }> = ({ value }) => {
  const gaugeEl = useRef<HTMLDivElement>(null)
  const gaugeRef = useRef<Instance | null>(null)
  useEffect(() => {
    if (!gaugeRef.current) {
      if (!gaugeEl.current) return
      const options = { ...defaultOptions, color: (value) => value < 70 ? 'green' : 'yellow' }
      gaugeRef.current = SvgGauge(gaugeEl.current, options)
      gaugeRef.current?.setValue(1)
    }
    gaugeRef.current?.setValueAnimated(value, 1)
  }, [value])

  return (
    <div style={{ height: '500px', width: '500px' }}>
      <div ref={gaugeEl} className='gauge-container' style={{ position: 'relative' }}>
        <span style={{ position: 'absolute', left: '45%', bottom: '70%' }}>km/hr</span>
      </div>
    </div>
  )
}

I'm rather unfamiliar with the library, so i could be way off. This is just what I have so far and is working for my simplistic use case.

Facing this error on instantiating svg-gauge. "Error: attribute d: Expected number, "…0 A 40 40 0 1 1 NaN NaN". " this setAttribute call is causing the error https://github.com/naikus/svg-gauge/blob/ab68cda8413d9ab716d70fde552b04ea96ce6ee0/src/gauge.js#L279

I am implementing this neat svg-gauge via the wrapper that @mattlewis92 made here

I am experiencing a ReferenceError, k is not defined when I try to run my Angular 8 app with an svg-gauge in it.

Per the console error, it seems that this is the line of code that I am battling: https://github.com/naikus/svg-gauge/blob/master/src/gauge.js#L96

Would you be able to modify this line (or I could create a PR..?),

FROM

for(k in s) {

TO

for(let k in s) {

I am hoping that this will solve my problems. If you have any other advice, it will be much appreciated.

Screenshot:

https://angular-ssr-example.coltenkrauter.com https://github.com/coltenkrauter/angular-ssr-example

Hello, nice component. It would be great to have this kind of features added:

1. Usage in non square container If you set dialStartAngle to180 and dialEndAngle to 0, gauge will stay on the top half of its container. If you downsize container's height, gauge will resize. Is there any way to make it not resizable?

2. Floating point support Is there any way to set a gauge value to a floating point number (i.e. 10.5) and have it shown?

3. Min/Max values on dial and name/unit It would be a nice improvement to add the min/max values on dial (with option to enable/disable them and customize font/size, ...) and optionally a measurement unit near gauge value

Thanks, Stefano

Hello,

Is it possible to implement changing color when value displayed on the gauge gradually increase ? For example, begin from green and finish to red.

Thank you a lot for your consideration.

Hello,

I saw an issue with ios's Safari. The style association doesn't work on it, therefore I made a patch for this issue.

Best regards, and thanks for your job (it's a very useful lib).

Would like to use this module but I'm using other design on our paths eg. 'stroke-linecap': 'round', 'stroke-linejoin': 'round' on the paths. I made it possible to add attributes to the SVG paths.

Take a look and see if you like it. Or just hit me back if something should be fixed.

There are also some problems with the formatting of your code. I'm using Webstorm and there seems to be a lot of extra tabs and spaces. Have you considered using: EditorConfig?

The gauge label, which is svg , doesn't work (gets ignored) when we try to apply a class with a transform inside. The solution is to add the inside a group: and apply to the class the group.

Hi and thanks so much for making this!!

I was having issues getting my gauges to animate in a react project and thought maybe it was my setup. I created a codesandbox and just pasted the exact react example from the readme and the animations still do not fire.

Animations seem to work fine in a pure JS project.

You can check out the code sandbox here.

Let me know if I'm doing anything wrong.

Hey there.

I realize that there are no needles to display multiple values, but what would be the best way to indicate something like an average value as an indicator?

Thanks in advance!

Amazing work... I'm noticing that all the SVGs generated with gauges have padding within the SVG, is it possible to have the gauge use the all the space in the SVG?

Given that the gauge currently has some random padding within the SVG it makes it near impossible to create an SVG that matches a design.

Thanks again for this, appreciate any tips. Thanks

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Title says it all. Basically, I have using the configuration below for labels

label: function(value) {
    return Math.round(value) + "/" + this.max;
}

But, when I use the setMaxValue() function there, it will not update the this.max in the label. https://github.com/naikus/svg-gauge/blob/5fd44a3f2d62a7019345bc3019a43f81693dbac5/src/gauge.js#L303-L305

I tried to replace this.max by this.limit, as it is the internal variable, but the label shows as NaN instead. https://github.com/naikus/svg-gauge/blob/5fd44a3f2d62a7019345bc3019a43f81693dbac5/src/gauge.js#L303-L305

Hi!

.gauge-container.one > .gauge > .value-text { fill: rgb(47, 227, 255);
}

.gauge-container.three > .gauge > .value-text { fill: #C9DE3C; }

Not working?

Current implementation uses normalized values (constrained inside min/max), but this is not always desired. Eg. i use it for displaying sensor values, the gauges are constrained to display interested range, but values sometime goes out of these boundaries. All works OK, but the gauge stays to display normalized (min or max) value in label, which is false value of course.

Please, use normalized values only for internal calculations (drawing) and allow to show real values for label.