### Install react-gauge-component with npm

Source: https://github.com/antoniolago/react-gauge-component/blob/main/README.md

Use npm to install the react-gauge-component library. This is a standard installation command.

```js
npm install react-gauge-component --save
```

--------------------------------

### Install react-gauge-component

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Install the library using npm, pnpm, yarn, or bun.

```bash
npm install react-gauge-component --save
# or
pnpm add react-gauge-component --save
# or
yarn add react-gauge-component
# or
bun add react-gauge-component
```

--------------------------------

### Install react-gauge-component with bun

Source: https://github.com/antoniolago/react-gauge-component/blob/main/README.md

Use bun to install the react-gauge-component library. This is a newer package manager installation.

```js
bun add react-gauge-component.
```

--------------------------------

### Install react-gauge-component with pnpm

Source: https://github.com/antoniolago/react-gauge-component/blob/main/README.md

Use pnpm to install the react-gauge-component library. This is an alternative package manager installation.

```js
pnpm add react-gauge-component --save
```

--------------------------------

### Install react-gauge-component with yarn

Source: https://github.com/antoniolago/react-gauge-component/blob/main/README.md

Use yarn to install the react-gauge-component library. This is another common package manager installation.

```js
yarn add react-gauge-component.
```

--------------------------------

### Import and use GaugeComponent

Source: https://github.com/antoniolago/react-gauge-component/blob/main/README.md

Import the GaugeComponent from the library and use it in your React application. This example shows the default component usage.

```jsx
import GaugeComponent from 'react-gauge-component';
//or
import { GaugeComponent } from 'react-gauge-component';

//Component with default values
<GaugeComponent />
```

--------------------------------

### MultiPointerRef

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Reference object for a multi-pointer setup.

```APIDOC
## MultiPointerRef

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `element` | `any` | Yes | - |
| `path` | `any` | Yes | - |
| `context` | `PointerContext` | Yes | - |
| `index` | `number` | Yes | Index of this pointer in the pointers array |
| `animationInProgress` | `boolean` | Yes | Whether animation is currently in progress for this pointer |
```

--------------------------------

### Custom Arc Angles for Gauge

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Override the default start and end angles of the gauge arc to create custom sweeps or full-circle gauges. Units are in degrees.

```tsx
import GaugeComponent from 'react-gauge-component';

// Full-circle radial gauge (compass)
<GaugeComponent
  type="radial"
  value={270}
  minValue={0}
  maxValue={360}
  startAngle={-180}
  endAngle={180}
  arc={{ subArcs: [{ color: '#3498db' }], width: 0.08 }}
  labels={{
    valueLabel: { formatTextValue: (v) => `${Math.round(v)}°` },
  }}
/>

// Custom narrow sweep (e.g., -145° to 40°)
<GaugeComponent
  type="radial"
  value={1200}
  minValue={-300}
  maxValue={3000}
  startAngle={-145}
  endAngle={40}
  arc={{ nbSubArcs: 52, colorArray: ['#ff00ff', '#00ffff'] }}
/>
```

--------------------------------

### Single Pointer Configuration (Needle, Arrow, Blob)

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Configure the single pointer with options for type ('needle', 'arrow', 'blob'), color, length, width, and animation. Elastic animation and animation delays are supported.

```tsx
import GaugeComponent from 'react-gauge-component';

// Needle with elastic animation
<GaugeComponent
  value={75}
  pointer={{
    type: 'needle',
    color: '#e0e0e0',
    baseColor: '#ffffff',
    length: 0.87,          // ratio of radius
    width: 24,             // factor × gauge width
    animate: true,
    elastic: true,
    animationDuration: 3000, // ms
    animationDelay: 100,     // ms
    strokeWidth: 2,
    strokeColor: '#000000',
    hideGrabHandle: true,
    maxFps: 30,              // reduce for mobile performance
    animationThreshold: 0.001,
  }}
/>

// Blob pointer centered on arc
<GaugeComponent
  value={50}
  pointer={{
    type: 'blob',
    color: '#4fc3f7',
    elastic: true,
    blobOffset: 0.5,   // 0 = inner edge, 1 = outer edge
    maxFps: 30,
  }}
/>

// Arrow pointer
<GaugeComponent
  value={30}
  pointer={{
    type: 'arrow',
    color: '#e0e0e0',
    width: 15,
    arrowOffset: 0.72, // radial position, 0 = center, 1 = arc edge
    maxFps: 30,
  }}
/>

// Hidden pointer (display-only arc)
<GaugeComponent value={60} pointer={{ hide: true }} />
```

--------------------------------

### Tooltip Configuration

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configure the appearance and content of tooltips.

```APIDOC
## Tooltip Configuration

Customize the tooltip displayed on the gauge.

### Properties

- **style** (React.CSSProperties) - Optional - CSS styles for the tooltip.
- **text** (string) - Optional - The text content of the tooltip.
```

--------------------------------

### Custom Content Rendering with renderContent

Source: https://github.com/antoniolago/react-gauge-component/blob/main/API.md

Shows how to customize the displayed value using the renderContent prop, allowing for custom HTML and styling.

```jsx
<GaugeComponent
  value={42}
  labels={{
    valueLabel: {{
      renderContent: (value, color) => (
        <div style={{ textAlign: 'center', color }}>
          <span style={{ fontSize: '2rem' }}>{value}</span>
          <span style={{ fontSize: '0.8rem' }}>km/h</span>
        </div>
      )
    }}
  }}
/>
```

--------------------------------

### Multi-Pointer Gauge Configuration

Source: https://github.com/antoniolago/react-gauge-component/blob/main/API.md

Sets up a gauge with multiple pointers, each having its own value, color, and optional label.

```jsx
<GaugeComponent
  pointers={[
    { value: 25, color: '#FF6B6B', label: 'CPU' },
    { value: 60, color: '#4ECDC4', label: 'Memory' }
  ]}
/>
```

--------------------------------

### Basic Gauge Component Usage

Source: https://github.com/antoniolago/react-gauge-component/blob/main/API.md

Demonstrates the most basic usage of the GaugeComponent by setting a single value.

```jsx
<GaugeComponent value={65} />
```

--------------------------------

### Initialize Google Analytics

Source: https://github.com/antoniolago/react-gauge-component/blob/main/public/index.html

This snippet initializes the Google Analytics data layer and configures the tracking ID. Ensure this is included before other analytics calls.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag(){
    dataLayer.push(arguments);
}

gtag('js', new Date());
gtag('config', 'G-1G3KWL106Z');
```

--------------------------------

### GaugeComponent with Explicit Defaults

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Demonstrates explicit configuration of all default props for GaugeComponent.

```tsx
<GaugeComponent
  id="my-gauge"
  className="gauge-component-class"
  style={{ width: '100%' }}
  type="grafana"           // "semicircle" | "radial" | "grafana"
  value={33}
  minValue={0}
  maxValue={100}
  marginInPercent={0.07}   // or { top: 0.12, bottom: 0.00, left: 0.07, right: 0.07 }
  fadeInAnimation={false}
/>
```

--------------------------------

### Single Pointer Configuration

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Configures the single pointer used in non-multi-pointer mode. Supports different pointer types like 'needle', 'arrow', and 'blob', with extensive customization options for appearance, animation, and behavior.

```APIDOC
## `pointer` Prop — Single Pointer Configuration

Configures the single pointer used in non-multi-pointer mode. Type: `PointerProps`.

| Type | Default Length | Description |
|---|---|---|
| `"needle"` | 0.70 | Classic needle from center |
| `"arrow"` | 0.20 | Arrow sitting on the arc |
| `"blob"` | 0.70 | Circular blob on the arc |

### Request Example
```tsx
// Needle with elastic animation
<GaugeComponent
  value={75}
  pointer={{
    type: 'needle',
    color: '#e0e0e0',
    baseColor: '#ffffff',
    length: 0.87,          // ratio of radius
    width: 24,             // factor × gauge width
    animate: true,
    elastic: true,
    animationDuration: 3000, // ms
    animationDelay: 100,     // ms
    strokeWidth: 2,
    strokeColor: '#000000',
    hideGrabHandle: true,
    maxFps: 30,              // reduce for mobile performance
    animationThreshold: 0.001,
  }}
/>

// Blob pointer centered on arc
<GaugeComponent
  value={50}
  pointer={{
    type: 'blob',
    color: '#4fc3f7',
    elastic: true,
    blobOffset: 0.5,   // 0 = inner edge, 1 = outer edge
    maxFps: 30,
  }}
/>

// Arrow pointer
<GaugeComponent
  value={30}
  pointer={{
    type: 'arrow',
    color: '#e0e0e0',
    width: 15,
    arrowOffset: 0.72, // radial position, 0 = center, 1 = arc edge
    maxFps: 30,
  }}
/>

// Hidden pointer (display-only arc)
<GaugeComponent value={60} pointer={{ hide: true }} />
```
```

--------------------------------

### Pointer Visual Effects

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Adds glow and drop shadow to the pointer. Allows configuration of glow properties (blur, spread, color) and drop shadow parameters (dx, dy, blur, color, opacity).

```APIDOC
## `pointer.effects` — Pointer Visual Effects

Adds glow and drop shadow to the pointer. Type: `PointerEffects`.

### Request Example
```tsx
<GaugeComponent
  value={55}
  pointer={{
    type: 'needle',
    effects: {
      glow: true,
      glowBlur: 8,
      glowSpread: 2,
      glowColor: '#ffffff',
      dropShadow: { dx: 0, dy: 2, blur: 4, color: '#000', opacity: 0.5 },
    },
  }}
/>
```
```

--------------------------------

### Labels

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configuration for displaying value and tick labels.

```APIDOC
## Labels

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `valueLabel` | `ValueLabel` | No | This configures the central value label. |
| `tickLabels` | `TickLabels` | No | This configures the ticks and it's values labels. |
```

--------------------------------

### Enable Initial Fade-In Animation

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Apply a CSS opacity fade-in animation on the initial render to prevent a brief flash of the unpainted gauge.

```tsx
import GaugeComponent from 'react-gauge-component';

<GaugeComponent value={50} fadeInAnimation={true} />
```

--------------------------------

### PointerProps

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configuration options for the gauge pointer.

```APIDOC
## PointerProps

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `type` | `"needle" | "blob" | "arrow"` | No | Pointer type |
| `color` | `string` | No | Pointer color |
| `hide` | `boolean` | No | Enabling this flag will hide the pointer |
| `baseColor` | `string` | No | Pointer color of the central circle |
| `length` | `number` | No | Pointer length |
| `width` | `number` | No | This is a factor to multiply by the width of the gauge |
| `animate` | `boolean` | No | This enables pointer animation for transiction between values when enabled |
| `elastic` | `boolean` | No | This gives animation an elastic transiction between values |
| `animationDuration` | `number` | No | Animation duration in ms |
| `animationDelay` | `number` | No | Animation delay in ms |
| `strokeWidth` | `number` | No | Stroke width of the pointer border |
| `strokeColor` | `string` | No | Stroke/border color of the pointer. Defaults to a contrasting color |
| `arrowOffset` | `number` | No | Arrow offset - controls radial position of arrow pointer (0-1, default 0.72). Lower = closer to center, higher = closer to arc edge |
| `blobOffset` | `number` | No | Blob offset - controls radial position of blob pointer (0-1, default 0.5 = centered on arc). Lower = inner edge, higher = outer edge |
| `hideGrabHandle` | `boolean` | No | Hide the grab handle circle shown at pointer tip when drag mode is enabled |
| `effects` | `PointerEffects` | No | Visual effects for the pointer |
| `maxFps` | `number` | No | Maximum frames per second for animation updates (default: 60). Lower values reduce GPU/CPU load on mobile devices. Recommended: 60 (smooth), 30 (balanced), 15 (low-power) / |
| `animationThreshold` | `number` | No | Minimum progress change threshold before updating DOM (default: 0.001). Higher values skip more frames, reducing render load. Range: 0.0001 (smooth) to 0.01 (choppy but fast) / |
```

--------------------------------

### Pointer Visual Effects (Glow, Drop Shadow)

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Apply glow and drop shadow effects to the pointer. Glow effects can be customized with blur, spread, and color. Drop shadows require dx, dy, blur, color, and opacity.

```tsx
import GaugeComponent from 'react-gauge-component';

<GaugeComponent
  value={55}
  pointer={{
    type: 'needle',
    effects: {
      glow: true,
      glowBlur: 8,
      glowSpread: 2,
      glowColor: '#ffffff',
      dropShadow: { dx: 0, dy: 2, blur: 4, color: '#000', opacity: 0.5 },
    },
  }}
/>
```

--------------------------------

### PointerEffects

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Visual effects for the pointer.

```APIDOC
## PointerEffects

### Description
Visual effects for the pointer.

### Properties
#### glow (boolean) - Optional - Enable glow effect.
#### glowColor (string) - Optional - Glow color (defaults to pointer color).
#### glowBlur (number) - Optional - Glow blur radius (default: 8).
#### glowSpread (number) - Optional - Glow spread (default: 2).
#### dropShadow (object) - Optional - Drop shadow
  #### dx (number) - Optional - -
  #### dy (number) - Optional - -
  #### blur (number) - Optional - -
  #### color (string) - Optional - -
  #### opacity (number) - Optional - -.
```

--------------------------------

### Multi-Pointer Configuration

Source: https://github.com/antoniolago/react-gauge-component/blob/main/API.md

Use the 'pointers' prop to configure multiple pointers for a compound gauge. Each pointer can have its own value, color, and label. This prop takes precedence over single 'value' and 'pointer' props.

```javascript
pointers={[ 
  { value: 15, color: '#ff0000', label: 'Back Pressure' }, 
  { value: 25, color: '#00ff00', label: 'Turbo 1' }, 
  { value: 35, color: '#0000ff', label: 'Turbo 2' }, 
]}
```

--------------------------------

### PointerContext

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Contextual information about the pointer's state and position.

```APIDOC
## PointerContext

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `centerPoint` | `number[]` | Yes | - |
| `pointerRadius` | `number` | Yes | - |
| `pathLength` | `number` | Yes | - |
| `currentPercent` | `number` | Yes | - |
| `prevPercent` | `number` | Yes | - |
| `prevProgress` | `number` | Yes | - |
| `pathStr` | `string` | Yes | - |
| `shouldDrawPath` | `boolean` | Yes | - |
| `prevColor` | `string` | Yes | - |
```

--------------------------------

### TickLabels Configuration

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configure the appearance and behavior of tick labels on the gauge.

```APIDOC
## TickLabels Configuration

This section details the properties for configuring tick labels in the React Gauge Component.

### Properties

- **hideMinMax** (boolean) - Optional - Hide first and last ticks and their values.
- **type** ("inner" | "outer") - Optional - Determines whether the ticks are positioned inside or outside the arcs.
- **autoSpaceTickLabels** (boolean) - Optional - Automatically detects and separates closely-spaced tick labels to prevent overlap.
- **ticks** (Array<Tick>) - Optional - A list of desired ticks to display on the gauge.
- **defaultTickValueConfig** (TickValueConfig) - Optional - Default configuration for tick value labels, applicable to all ticks unless overridden.
- **defaultTickLineConfig** (TickLineConfig) - Optional - Default configuration for tick line labels, applicable to all ticks unless overridden.
- **effects** (TickEffects) - Optional - Visual effects to be applied to all ticks, can be overridden per tick.
```

--------------------------------

### Multi-Pointer Mode Configuration

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Render multiple independent pointers on the same gauge. Each pointer can have its own value, color, type, and label. This mode takes precedence over single pointer configurations.

```tsx
import GaugeComponent from 'react-gauge-component';

<GaugeComponent
  type="grafana"
  minValue={0}
  maxValue={100}
  pointers={[
    {
      value: 50,
      type: 'needle',
      color: '#e0e0e0',
      baseColor: '#ffffff',
      length: 0.87,
      width: 24,
      strokeWidth: 2,
      strokeColor: '#000000',
      label: 'Current',
    },
    {
      value: 30,
      type: 'needle',
      color: '#F5CD19',
      baseColor: '#ffffff',
      length: 0.87,
      width: 24,
      strokeWidth: 2,
      strokeColor: '#000000',
      label: 'Target',
    },
  ]}
  labels={{
    valueLabel: {
      multiPointerDisplay: 'all', // 'primary' | 'all' | 'none'
    },
  }}
/>
```

--------------------------------

### Dynamic import GaugeComponent for Next.js

Source: https://github.com/antoniolago/react-gauge-component/blob/main/README.md

For Next.js applications, use dynamic import to load the GaugeComponent, ensuring it's not server-side rendered. This is crucial for components that rely on browser APIs.

```jsx
import dynamic from "next/dynamic";
const GaugeComponent = dynamic(() => import('react-gauge-component'), { ssr: false });

//Component with default values
<GaugeComponent />
```

--------------------------------

### TickLineConfig

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configure the visual properties of tick lines.

```APIDOC
## TickLineConfig

Customize the appearance of tick lines.

### Properties

- **width** (number) - Optional - The width of the tick line.
- **length** (number) - Optional - The length of the tick line.
- **distanceFromArc** (number) - Optional - The distance of the tick line from the arc.
- **distanceFromText** (number) - Optional - The distance between the tick line and its text label.
- **color** (string) - Optional - The color of the tick line.
- **hide** (boolean) - Optional - If true, hides the tick line.
- **effects** (TickEffects) - Optional - Visual effects for the tick line.
```

--------------------------------

### LabelEffects

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configuration options for label visual effects.

```APIDOC
## LabelEffects

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `glow` | `boolean` | No | Enable glow effect |
| `glowColor` | `string` | No | Glow color (defaults to label color) |
| `glowBlur` | `number` | No | Glow blur radius (default: 6) |
| `glowSpread` | `number` | No | Glow spread (default: 2) |
| `textShadow` | `string` | No | Text shadow for enhanced readability |
```

--------------------------------

### Multi-Pointer Interactive Gauge

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Enables drag-to-input mode for multi-pointer gauges. Use `onPointerChange` to update specific pointer values, receiving the pointer index and new value.

```tsx
import React, { useState } from 'react';
import GaugeComponent from 'react-gauge-component';

// Multi-pointer interactive gauge
function MultiControl() {
  const [values, setValues] = useState([25, 60]);
  return (
    <GaugeComponent
      minValue={0}
      maxValue={100}
      pointers={[
        { value: values[0], color: '#EA4228', label: 'Min' },
        { value: values[1], color: '#5BE12C', label: 'Max' },
      ]}
      onPointerChange={(index, value) => {
        const next = [...values];
        next[index] = Math.round(value);
        setValues(next);
      }}
    />
  );
}
```

--------------------------------

### ValueLabel

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configuration for the central value label, including text formatting.

```APIDOC
## ValueLabel

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `formatTextValue` | `(value: any) => string` | No | This function enables to format the central value text as you wish. |
```

--------------------------------

### TickEffects

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configuration options for tick line visual effects.

```APIDOC
## TickEffects

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `glow` | `boolean` | No | Enable glow effect on tick lines |
| `glowColor` | `string` | No | Glow color (defaults to tick line color) |
| `glowBlur` | `number` | No | Glow blur radius (default: 4) |
| `glowSpread` | `number` | No | Glow spread (default: 2) |
```

--------------------------------

### Arc

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Configuration for the main arc of the gauge.

```APIDOC
## Arc

### Description
Configuration for the main arc of the gauge.

### Properties
#### cornerRadius (number) - Optional - The corner radius of the arc.
#### padding (number) - Optional - The padding between subArcs, in rad.
#### padEndpoints (boolean) - Optional - Remove padding from start and end of the arc (first and last subArcs).
#### width (number) - Optional - The width of the arc given in percent of the radius.
#### nbSubArcs (number) - Optional - The number of subArcs, this overrides "subArcs" limits.
#### gradient (boolean) - Optional - Boolean flag that enables or disables gradient mode, which draws a single arc with provided colors.
#### colorArray (Array<string>) - Optional - The colors of the arcs, this overrides "subArcs" colors.
#### emptyColor (string) - Optional - Color of the grafana's empty subArc.
#### subArcs (Array<SubArc>) - Optional - list of sub arcs segments of the whole arc.
#### outerArc (object) - Optional - Settings for Grafana's outer decorative arc (only applies to grafana type)
  #### cornerRadius (number) - Optional - Corner radius for outer arc (max effective value ~2 due to thin arc).
  #### padding (number) - Optional - Padding between outer arc segments.
  #### width (number) - Optional - Width of the outer arc in pixels (default: 5).
  #### effects (ArcEffects) - Optional - Visual effects for the outer arc (inherits from arc.effects if not set).
```

--------------------------------

### Styled Gauge with SubArcs and Needle Pointer

Source: https://github.com/antoniolago/react-gauge-component/blob/main/API.md

Configures a gauge with multiple colored sub-arcs and a needle-style pointer with elastic behavior.

```jsx
<GaugeComponent
  value={75}
  arc={{
    subArcs: [
      { limit: 30, color: '#EA4228' },
      { limit: 70, color: '#F5CD19' },
      { color: '#5BE12C' }
    ]
  }}
  pointer={{ type: "needle", elastic: true }}
/>
```

--------------------------------

### Tick Configuration

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Define individual tick properties for specific points on the gauge.

```APIDOC
## Tick Configuration

Configure individual ticks with specific values and custom styling.

### Properties

- **value** (number) - Optional - The numerical value the tick corresponds to.
- **valueConfig** (TickValueConfig) - Optional - Overrides the default tick value configuration for this specific tick.
- **lineConfig** (TickLineConfig) - Optional - Overrides the default tick line configuration for this specific tick.
- **effects** (TickEffects) - Optional - Visual effects for this specific tick, overriding the general `tickLabels.effects`.
```

--------------------------------

### Segmented Arc with Tooltips and Events

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Customize the arc with multiple colored sub-arcs, tooltips, and event handlers.

```tsx
<GaugeComponent
  value={55}
  arc={{
    width: 0.2,
    padding: 0.015,
    cornerRadius: 2,
    padEndpoints: false,
    subArcsStrokeWidth: 1,
    subArcsStrokeColor: '#000',
    subArcs: [
      {
        limit: 25,
        color: '#EA4228',
        showTick: true,
        tooltip: { text: 'Critical', style: { color: 'white' } },
        onClick: () => console.log('critical zone clicked'),
        onMouseMove: () => console.log('hovering critical'),
        onMouseLeave: () => console.log('left critical'),
      },
      { limit: 60, color: '#F5CD19', showTick: true, tooltip: { text: 'Warning' } },
      { color: '#5BE12C', tooltip: { text: 'Normal' } },
    ],
  }}
/>
```

--------------------------------

### Minimal GaugeComponent Usage

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Render a gauge with default settings by omitting all props.

```tsx
<GaugeComponent />
```

--------------------------------

### Multi-Pointer Mode

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Renders multiple independent pointers on the same gauge, each with its own value, color, and configuration. Takes precedence over `value` and `pointer` props. Each entry extends `PointerProps` with a required `value` and optional `label`.

```APIDOC
## `pointers` Prop — Multi-Pointer Mode

Renders multiple independent pointers on the same gauge, each with its own value, color, and configuration. Takes precedence over `value` and `pointer` props when provided. Each entry extends `PointerProps` with a required `value` and optional `label`. Type: `PointerWithValue[]`.

### Request Example
```tsx
<GaugeComponent
  type="grafana"
  minValue={0}
  maxValue={100}
  pointers={[
    {
      value: 50,
      type: 'needle',
      color: '#e0e0e0',
      baseColor: '#ffffff',
      length: 0.87,
      width: 24,
      strokeWidth: 2,
      strokeColor: '#000000',
      label: 'Current',
    },
    {
      value: 30,
      type: 'needle',
      color: '#F5CD19',
      baseColor: '#ffffff',
      length: 0.87,
      width: 24,
      strokeWidth: 2,
      strokeColor: '#000000',
      label: 'Target',
    },
  ]}
  labels={{
    valueLabel: {
      multiPointerDisplay: 'all', // 'primary' | 'all' | 'none'
    },
  }}
/>
```
```

--------------------------------

### PointerRef

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Reference object for a gauge pointer.

```APIDOC
## PointerRef

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `element` | `any` | Yes | - |
| `path` | `any` | Yes | - |
| `context` | `PointerContext` | Yes | - |
```

--------------------------------

### Network Bandwidth Meter with Dynamic Tick Labels

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

A gauge component designed for network bandwidth monitoring, displaying values in kbit/s or mbit/s. It utilizes dynamic tick labels and a color array for visual feedback on bandwidth usage.

```tsx
import GaugeComponent from 'react-gauge-component';

const formatBandwidth = (v: number) =>
  v >= 1000 ? `${(v / 1000).toFixed(Number.isInteger(v / 1000) ? 0 : 1)} mbit/s` : `${v.toFixed(0)} kbit/s`;

<GaugeComponent
  value={1750}
  maxValue={3000}
  arc={{
    nbSubArcs: 150,
    colorArray: ['#5BE12C', '#F5CD19', '#EA4228'],
    width: 0.3,
    padding: 0.003,
    cornerRadius: 0,
  }}
  labels={{
    valueLabel: {{
      formatTextValue: formatBandwidth,
      style: { fontSize: 40 },
      offsetY: -20,
    }},
    tickLabels: {{
      type: 'outer',
      ticks: [100, 500, 1000, 2000, 3000].map((v) => ({ value: v })),
      defaultTickValueConfig: {{
        formatTextValue: formatBandwidth,
        style: { fontSize: 10 },
      }},
    }},
  }}
/>
```

--------------------------------

### Import react-gauge-component

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Import the component using default or named imports. For Next.js, use dynamic import to disable SSR.

```tsx
import GaugeComponent from 'react-gauge-component';
// or named import
import { GaugeComponent } from 'react-gauge-component';

// Next.js — must use dynamic import to disable SSR
import dynamic from "next/dynamic";
const GaugeComponent = dynamic(() => import('react-gauge-component'), { ssr: false });
```

--------------------------------

### PointerWithValue

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Represents a pointer with an associated value and an optional label.

```APIDOC
## PointerWithValue

| Property | Type | Required | Description |
|----------|------|----------|-------------|
| `value` | `number` | Yes | The value this pointer points to |
| `label` | `string` | No | Optional label for this pointer's value (shown in value display) |
```

--------------------------------

### Single Pointer Interactive Gauge

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Enables drag-to-input mode for a single pointer gauge. Use `onValueChange` to update the gauge's value.

```tsx
import React, { useState } from 'react';
import GaugeComponent from 'react-gauge-component';

// Single pointer interactive gauge
function TemperatureControl() {
  const [temp, setTemp] = useState(22);
  return (
    <div>
      <GaugeComponent
        type="semicircle"
        value={temp}
        minValue={16}
        maxValue={30}
        onValueChange={(newTemp) => setTemp(Math.round(newTemp))}
        pointer={{ type: 'needle', hideGrabHandle: false }}
        labels={{
          valueLabel: { formatTextValue: (v) => `${Math.round(v)}°C` },
        }}
      />
      <p>Set temperature: {temp}°C</p>
    </div>
  );
}
```

--------------------------------

### Exported TypeScript Types for GaugeComponent

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Imports all available interfaces from the react-gauge-component library for use in TypeScript projects. Demonstrates typed configuration objects for arcs and pointers.

```tsx
import {
  GaugeComponent,
  GaugeComponentProps,
  GaugeType,
  Arc,
  SubArc,
  Labels,
  ValueLabel,
  PointerProps,
  PointerType,
  PointerContext,
  PointerRef,
  Tick,
  TickLabels,
  TickLineConfig,
  TickValueConfig,
  Tooltip,
  Angles,
  Dimensions,
  Margin,
} from 'react-gauge-component';

// Typed configuration objects
const arcConfig: Arc = {
  width: 0.25,
  padding: 0.01,
  cornerRadius: 2,
  subArcs: [
    { limit: 33, color: '#5BE12C' },
    { limit: 66, color: '#F5CD19' },
    { color: '#EA4228' },
  ],
};

const pointerConfig: PointerProps = {
  type: 'needle' as PointerType,
  animate: true,
  elastic: false,
  animationDuration: 2000,
  maxFps: 60,
};

const props: Partial<GaugeComponentProps> = {
  type: GaugeType.Grafana,
  value: 55,
  arc: arcConfig,
  pointer: pointerConfig,
};

<GaugeComponent {...props} />
```

--------------------------------

### GaugeComponentProps

Source: https://github.com/antoniolago/react-gauge-component/blob/main/docs/API.md

Props for the main Gauge component.

```APIDOC
## GaugeComponentProps

### Description
Props for the main Gauge component.

### Properties
#### id (string) - Optional - Gauge element will inherit this.
#### className (string) - Optional - Gauge element will inherit this.
#### style (React.CSSProperties) - Optional - Gauge element will inherit this.
```

--------------------------------

### Server Temperature Monitor Gauge

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

A semicircle gauge component configured to monitor server temperature. It uses sub-arcs to indicate temperature ranges (Cold, Optimal, Warm, Critical) with tooltips and displays temperature in Celsius.

```tsx
import GaugeComponent from 'react-gauge-component';

<GaugeComponent
  value={28}
  type="semicircle"
  minValue={10}
  maxValue={50}
  arc={{
    width: 0.2,
    padding: 0.015,
    cornerRadius: 2,
    subArcs: [
      { limit: 18, color: '#00bcd4', showTick: true, tooltip: { text: 'Cold' } },
      { limit: 25, color: '#4caf50', showTick: true, tooltip: { text: 'Optimal' } },
      { limit: 35, color: '#ff9800', showTick: true, tooltip: { text: 'Warm' } },
      { color: '#f44336', tooltip: { text: 'Critical!' } },
    ],
  }}
  pointer={{ type: 'needle', color: '#e0e0e0', length: 0.7, width: 8, maxFps: 30 }}
  labels={{
    valueLabel: {{
      formatTextValue: (v) => `${v.toFixed(1)}°C`,
      style: { fontSize: '20px', fill: '#e0e0e0', fontWeight: 'bold' },
    }},
    tickLabels: {{
      type: 'outer',
      defaultTickValueConfig: {{
        formatTextValue: (v) => `${v}°`,
        style: { fontSize: '9px', fill: '#aaa' },
      }},
      defaultTickLineConfig: { color: '#666', length: 4, width: 1 },
    }},
  }}
/>
```

--------------------------------

### GaugeComponent Props

Source: https://github.com/antoniolago/react-gauge-component/blob/main/API.md

The GaugeComponent accepts various props to customize its behavior and appearance. These include general element styling, value configuration, arc styling, and label formatting.

```APIDOC
## GaugeComponent Props

`<GaugeComponent />` accepts the following props:

- **`id`** (`string`) - Gauge element will inherit this.

- **`className`** (`string`) - Gauge element will inherit this.

- **`style`** (`React.CSSProperties`) - Gauge element will inherit this.

- **`marginInPercent`** (`GaugeInnerMarginInPercent | number`) - Configures the canvas margin relative to the gauge. Can be a single number or per-side object. Unit: ratio (0-1, e.g., 0.07 = 7%).

- **`value`** (`number`) - Current pointer value.

- **`minValue`** (`number`) - Minimum value possible for the Gauge.

- **`maxValue`** (`number`) - Maximum value possible for the Gauge.

- **`arc`** (`Arc`) - This configures the arc of the Gauge.
  - `cornerRadius` (`number`) - The corner radius of the arc. Unit: SVG units.
  - `padding` (`number`) - The padding between subArcs. Unit: radians (default: 0.01).
  - `padEndpoints` (`boolean`) - Remove padding from start and end of the arc (first and last subArcs).
  - `width` (`number`) - The width of the arc. Unit: ratio of radius (0-1, e.g., 0.25 = 25% of radius).
  - `nbSubArcs` (`number`) - The number of subArcs, this overrides "subArcs" limits.
  - `gradient` (`boolean`) - Enables gradient mode, drawing a single arc with smooth color transitions.
  - `colorArray` (`Array<string>`) - The colors of the arcs, this overrides "subArcs" colors.
  - `emptyColor` (`string`) - Color of the grafana's empty subArc
  - `subArcs` (`Array<SubArc>`) - List of sub arcs segments of the whole arc.
  - `outerArc` (`OuterArcConfig`) - Settings for Grafana's outer decorative arc (only applies to grafana type)
    - `cornerRadius` (`number`) - Corner radius for outer arc (max effective value ~2 due to thin arc). Unit: SVG units.
    - `padding` (`number`) - Padding between outer arc segments. Unit: radians.
    - `width` (`number`) - Width of the outer arc. Unit: pixels (default: 5).
    - `effects` (`ArcEffects`) - Visual effects for the outer arc (inherits from arc.effects if not set)
      - `glow` (`boolean`) - Enable glow effect on arcs
      - `glowColor` (`string`) - Glow color (defaults to arc color if not set)
      - `glowBlur` (`number`) - Glow intensity/blur radius. Unit: pixels (default: 10).
      - `glowSpread` (`number`) - Glow spread. Unit: pixels (default: 3).
      - `filterUrl` (`string`) - Custom SVG filter ID to apply
      - `dropShadow` (`DropShadowConfig`) - Drop shadow effect
        - `dx` (`number`) - Shadow offset X. Unit: pixels (default: 0).
        - `dy` (`number`) - Shadow offset Y. Unit: pixels (default: 2).
        - `blur` (`number`) - Shadow blur. Unit: pixels (default: 3).
        - `color` (`string`) - Shadow color (default: rgba(0,0,0,0.3)).
        - `opacity` (`number`) - Shadow opacity. Unit: ratio 0-1 (default: 0.3).
      - `innerShadow` (`boolean`) - Inner shadow/inset effect for 3D look
  - `subArcsStrokeWidth` (`number`) - Stroke/border width for all subArcs. Unit: pixels.
  - `subArcsStrokeColor` (`string`) - Stroke/border color for all subArcs
  - `effects` (`ArcEffects`) - CSS/SVG effects for the arc
    - `glow` (`boolean`) - Enable glow effect on arcs
    - `glowColor` (`string`) - Glow color (defaults to arc color if not set)
    - `glowBlur` (`number`) - Glow intensity/blur radius. Unit: pixels (default: 10).
    - `glowSpread` (`number`) - Glow spread. Unit: pixels (default: 3).
    - `filterUrl` (`string`) - Custom SVG filter ID to apply
    - `dropShadow` (`DropShadowConfig`) - Drop shadow effect
      - `dx` (`number`) - Shadow offset X. Unit: pixels (default: 0).
      - `dy` (`number`) - Shadow offset Y. Unit: pixels (default: 2).
      - `blur` (`number`) - Shadow blur. Unit: pixels (default: 3).
      - `color` (`string`) - Shadow color (default: rgba(0,0,0,0.3)).
      - `opacity` (`number`) - Shadow opacity. Unit: ratio 0-1 (default: 0.3).
    - `innerShadow` (`boolean`) - Inner shadow/inset effect for 3D look

- **`labels`** (`Labels`) - This configures the labels of the Gauge.
  - `valueLabel` (`ValueLabel`) - This configures the central value label.
    - `formatTextValue` (`(value: any) => string`) - This function enables to format the central value text as you wish.
    - `renderContent` (`(value: number, arcColor: string) => React.ReactNode`) - Render a custom React element instead of text for the value label. Receives the current value and arc color as parameters. When provided, this takes precedence over formatTextValue.  renderContent: (value, color) => ( <div style={{ textAlign: 'center' }}> <span style={{ fontSize: '2rem', color }}>{value}</span> <span style={{ fontSize: '0.8rem' }}>km/h</span> </div> )
    - `matchColorWithArc` (`boolean`) - This will sync the value label color with the current value of the Gauge.
    - `maxDecimalDigits` (`number`) - Maximum number of decimal digits to display in the value label.
    - `style` (`React.CSSProperties`) - Central label value will inherit this

```

--------------------------------

### Interactive Gauge with Value Input

Source: https://github.com/antoniolago/react-gauge-component/blob/main/API.md

Enables user interaction for changing the gauge value by providing the 'onValueChange' prop and managing the 'value' state.

```jsx
<GaugeComponent
  value={value}
  onValueChange={setValue}
/>
```

--------------------------------

### Color Array Interpolation for Arc

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Create a segmented arc with a smooth color transition by providing an array of colors and specifying the number of sub-arcs.

```tsx
<GaugeComponent
  value={80}
  arc={{
    nbSubArcs: 150,
    colorArray: ['#5BE12C', '#F5CD19', '#EA4228'],
    width: 0.3,
    padding: 0.003,
    cornerRadius: 0,
  }}
/>
```

--------------------------------

### Configure Tick Marks and Labels

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Customize tick lines and value labels along the gauge arc. Supports global defaults and per-tick overrides for formatting, styling, and content.

```tsx
import GaugeComponent from 'react-gauge-component';

// Outer ticks with global defaults and per-tick overrides
<GaugeComponent
  value={65}
  type="semicircle"
  arc={{
    subArcs: [
      { limit: 25, color: '#EA4228' },
      { limit: 75, color: '#F5CD19' },
      { color: '#5BE12C' },
    ],
  }}
  labels={{
    tickLabels: {
      type: 'outer',          // "inner" | "outer"
      hideMinMax: false,
      autoSpaceTickLabels: true, // prevents label overlap for close values
      defaultTickValueConfig: {
        formatTextValue: (v) => `${v}%`,
        style: { fontSize: '10px', fill: '#aaa' },
        maxDecimalDigits: 0,
        hide: false,
      },
      defaultTickLineConfig: {
        width: 1,               // pixels
        length: 7,              // pixels
        distanceFromArc: 3,     // pixels
        distanceFromText: 2,    // pixels
        color: 'rgb(173 172 171)',
        hide: false,
      },
      effects: {
        glow: true,
        glowBlur: 4,
        glowSpread: 2,
      },
      ticks: [
        { value: 0 },   // uses defaults
        { value: 25 },
        {
          value: 50,
          // per-tick value label override
          valueConfig: {
            formatTextValue: () => 'MID',
            style: { fontSize: '12px', fill: '#fff', fontWeight: 'bold' },
          },
          // per-tick line override
          lineConfig: { length: 12, color: '#fff', width: 2 },
          effects: { glow: true, glowBlur: 8, glowColor: '#fff' },
        },
        { value: 75 },
        { value: 100 },
      ],
    },
  }}
/>

// Tick renderContent — custom React node per tick label
<GaugeComponent
  value={180}
  minValue={0}
  maxValue={360}
  labels={{
    tickLabels: {
      ticks: [
        {
          value: 0,
          valueConfig: {
            renderContent: (v, color) => (
              <span style={{ fontSize: 10, color }}>N</span>
            ),
            contentWidth: 20,
            contentHeight: 16,
          },
        },
        { value: 90,  valueConfig: { renderContent: (v) => <span style={{ fontSize: 10, color: '#aaa' }}>E</span>, contentWidth: 20, contentHeight: 16 } },
        { value: 180, valueConfig: { renderContent: (v) => <span style={{ fontSize: 10, color: '#aaa' }}>S</span>, contentWidth: 20, contentHeight: 16 } },
        { value: 270, valueConfig: { renderContent: (v) => <span style={{ fontSize: 10, color: '#aaa' }}>W</span>, contentWidth: 20, contentHeight: 16 } },
      ],
    },
  }}
/>
```

--------------------------------

### Custom React Content for Value Label

Source: https://context7.com/antoniolago/react-gauge-component/llms.txt

Render custom React content within the SVG for the value label using `renderContent`. Specify `contentWidth` and `contentHeight` for the foreignObject.

```tsx
import GaugeComponent from 'react-gauge-component';

// Custom React content rendered inside the SVG via portal
<GaugeComponent
  value={42}
  labels={{
    valueLabel: {
      renderContent: (value, arcColor) => (
        <div style={{ textAlign: 'center' }}>
          <span style={{ fontSize: '2rem', color: arcColor, display: 'block' }}>
            {value}
          </span>
          <span style={{ fontSize: '0.8rem', color: '#aaa' }}>km/h</span>
        </div>
      ),
      contentWidth: 120,   // foreignObject width in pixels
      contentHeight: 60,   // foreignObject height in pixels
    },
  }}
/>
```