# @xuda.io/xuda-ui-plugin-gaugejs

> The Xuda Gauge.js Plugin integrates animated and customizable gauges into Xuda.io, perfect for visualizing performance metrics and progress tracking. With flexible arc angles, colors, pointer settings, and dynamic updates, it delivers sleek, real-time dat

Latest version **1.0.4** (published 2024-12-12) · Proprietary software licenses license · 0 weekly downloads

## Install

```sh
npm install @xuda.io/xuda-ui-plugin-gaugejs
pnpm add @xuda.io/xuda-ui-plugin-gaugejs
yarn add @xuda.io/xuda-ui-plugin-gaugejs
bun add @xuda.io/xuda-ui-plugin-gaugejs
```

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2024-12-12 |
| First published | 2024-12-12 |
| Weekly downloads | 0 |
| License | Proprietary software licenses |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 313.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xuda.io |
| Maintainers | xuda.io |
| Keywords | xuda, plugin, gauge, gaugeJS, progress indicator, data visualization, animated gauge, customizable gauge, Xuda plugin, real-time progress, dynamic gauges, arc gauge, performance metrics, progress tracking, UI component, visual feedback, interactive gauges, responsive design, modern dashboards, Xuda.io, gauge customization, sleek UI |

## Links

- npm: https://www.npmjs.com/package/@xuda.io/xuda-ui-plugin-gaugejs
- npm.io page: https://npm.io/package/@xuda.io/xuda-ui-plugin-gaugejs

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2024-12-12

## README

# Xuda Gauge.js Plugin

The **Xuda Gauge.js Plugin** integrates the versatile **Gauge.js** library into [Xuda.io](https://xuda.io), providing customizable and animated gauges for data visualization. Perfect for displaying performance metrics, progress tracking, or any data that requires a sleek, visual representation.

---

## Features

- **Customizable Gauges**: Adjust arc angles, colors, pointer settings, and more.
- **Dynamic Values**: Update gauge values in real-time.
- **Animated Transitions**: Smooth animations for value changes.
- **Xuda Compatibility**: Fully integrates with [Xuda.io](https://xuda.io) properties and UI components.

---

## Installation in Xuda Platform

1. Log in to your project on [Xuda.io](https://xuda.io).
2. Navigate to the **Plugins** tab in the project node.
3. Locate the **Xuda Gauge.js Plugin**.
4. Install the plugin by toggling the activation button.

---

## Usage in Xuda Studio

1. Open **Xuda Studio** on [Xuda.io](https://xuda.io).
2. Select a UI component where the gauge should be displayed.
3. Scroll down in the **Properties Pane** to locate the plugin options.
4. Activate the **Xuda Gauge.js Plugin** and configure its settings.

### Example Configuration in Xuda Studio

| Property            | Value     |
| ------------------- | --------- |
| `gauge_angle`       | `0.15`    |
| `gauge_line_width`  | `0.44`    |
| `gauge_color_start` | `#6FADCF` |
| `gauge_color_stop`  | `#8FC0DA` |
| `gauge_max_value`   | `100`     |
| `gauge_value`       | `75`      |

---

## Plugin Properties

| Property                     | Type     | Description                                               | Default Value |
| ---------------------------- | -------- | --------------------------------------------------------- | ------------- |
| `gauge_angle`                | `number` | The span of the gauge arc (e.g., 0.15 for a partial arc). | `0.15`        |
| `gauge_line_width`           | `number` | The thickness of the gauge line.                          | `0.44`        |
| `gauge_pointer_length`       | `number` | The length of the pointer relative to the gauge radius.   | `0.9`         |
| `gauge_pointer_stroke_width` | `number` | The thickness of the pointer stroke.                      | `0.035`       |
| `gauge_color_start`          | `string` | The starting color of the gauge arc.                      | `#6FADCF`     |
| `gauge_color_stop`           | `string` | The ending color of the gauge arc.                        | `#8FC0DA`     |
| `gauge_stroke_color`         | `string` | The color of the background arc.                          | `#E0E0E0`     |
| `gauge_max_value`            | `number` | The maximum value of the gauge.                           | `100`         |
| `gauge_min_value`            | `number` | The minimum value of the gauge.                           | `0`           |
| `gauge_value`                | `number` | The initial value displayed by the gauge.                 | `0`           |

---

---
_Source: https://npm.io/package/@xuda.io/xuda-ui-plugin-gaugejs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._