https://github.com/akbaruddin/components-gauge

Component Gauge
https://github.com/akbaruddin/components-gauge

component gauge plugin react reactjs reactjs-components

Last synced: 4 months ago
JSON representation

Component Gauge

• Host: GitHub
• URL: https://github.com/akbaruddin/components-gauge
• Owner: akbaruddin
• Created: 2022-09-07T16:48:55.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-11T12:18:20.000Z (over 3 years ago)
• Last Synced: 2025-10-11T03:38:07.228Z (8 months ago)
• Topics: component, gauge, plugin, react, reactjs, reactjs-components
• Language: TypeScript
• Homepage: https://components-gauge.vercel.app
• Size: 2.35 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: changelog.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

          
# Component Gauge

Simple React Component to create Gauge.

![npm bundle size](https://img.shields.io/bundlephobia/minzip/components-gauge?style=for-the-badge)

![NPM](https://img.shields.io/npm/l/components-gauge?style=for-the-badge)

![npm](https://img.shields.io/npm/v/components-gauge?style=for-the-badge)

![npm](https://img.shields.io/npm/dw/components-gauge?style=for-the-badge)

Demo: 

```bash

# npm

npm i components-gauge --save

# yarn

yarn add components-gauge

# pnpm

pnpm i components-gauge

```

### Usage

```jsx

import React, { Component } from "react";

import Gauge from "components-gauge";

export default function App() {

  return (

    

  );

}

```

## Props

| Prop                 | Default              | Description                                                                                                      |

| -------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------- |

| animated             | true                 | Animation                                                                                                        |

| width                | 200                  | width of chart 200px                                                                                             |

| height               | 200                  | height of chart 200px                                                                                            |

| baseStroke           | 2                    |                                                                                                                  |

| filledStroke         | 2.5                  |                                                                                                                  |

| baseColor            | #eee                 |                                                                                                                  |

| filledColor          | #666                 |                                                                                                                  |

| textColor            | #999                 |                                                                                                                  |

| radius               | 40                   |                                                                                                                  |

| showValue            | false                |                                                                                                                  |

| time                 | 10000(10s)           |                                                                                                                  |

| onEnd                | Empty                | Event on end                                                                                                     |

## License

MIT Licensed.