### Customize Gauge Chart Animation

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Control animation with `animate`, `animDelay`, and `animateDuration`. Use `animDelay` to set a delay before animation starts and `animateDuration` to control the sweep time. This allows for dramatic visual effects.

```jsx
import GaugeChart from 'react-gauge-chart';

// Slow, delayed animation for dramatic effect
<GaugeChart
  id="gauge-slow-anim"
  style={{ height: 250 }}
  animate={true}
  animDelay={1000}        // Wait 1s before starting
  animateDuration={5000}  // 5-second sweep
  percent={0.9}
  nrOfLevels={10}
/>
```

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

### Live-Updating GaugeChart

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

A GaugeChart that updates its needle position randomly every 2 seconds, demonstrating dynamic updates. Animation is set to start immediately with a shorter duration for frequent changes. Requires a unique 'id' prop.

```jsx
import React, { useState, useEffect } from 'react';
import GaugeChart from 'react-gauge-chart';

// Live-updating gauge that changes every 2 seconds
const LiveGauge = () => {
  const [value, setValue] = useState(0.4);

  useEffect(() => {
    const interval = setInterval(() => {
      setValue(Math.random()); // value between 0 and 1
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <GaugeChart
      id="live-gauge"
      style={{ height: 250 }}
      percent={value}
      animDelay={0}           // Start animation immediately on update
      animateDuration={1500}  // Faster animation for frequent updates
      nrOfLevels={10}
      colors={['#00C49F', '#FFBB28', '#FF4444']}
    />
  );
};
// The needle will smoothly swing to the new random value every 2 seconds.
```

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

### Create a Default Gauge Chart

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Renders a basic gauge chart with default settings. Requires a unique `id` prop.

```jsx
<GaugeChart id="gauge-chart1" />
```

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

### Gauge Chart with 20 Levels and 86% Pointer

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Configures a gauge chart with a specified number of levels and sets the pointer to a particular percentage. Use `nrOfLevels` for the total divisions and `percent` for the pointer's position (0 to 1).

```jsx
<GaugeChart id="gauge-chart2" 
  nrOfLevels={20} 
  percent={0.86} 
/>
```

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

### `percent` prop - Needle Position Control

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Details on how to use the `percent` prop to control the needle's position and trigger animations.

```APIDOC
### `percent` prop — Needle position control

The `percent` prop (0–1) is the primary data input for the gauge. Changing it triggers a smooth elastic needle animation from the previous position to the new one. Set `animate={false}` to disable animation and `animDelay={0}` to start it immediately.
```

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

### Full GaugeChart Prop Showcase

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Demonstrates extensive customization options for the GaugeChart component, including styling, levels, colors, needle, text, and animation. Requires a unique 'id' prop.

```jsx
import React from 'react';
import GaugeChart from 'react-gauge-chart';

// --- Full prop showcase ---
<GaugeChart
  id="gauge-full"
  style={{ height: 300 }}           // Container style; default width is '100%'
  className="my-gauge"              // Optional CSS class on the outer div
  marginInPercent={0.05}            // Inner SVG margin as a fraction of container width
  nrOfLevels={20}                   // Number of arc segments (ignored when arcsLength is set)
  percent={0.65}                    // Needle position: 0 = far left, 1 = far right
  arcPadding={0.02}                 // Gap between arc segments in radians
  arcWidth={0.3}                    // Arc thickness as a fraction of radius
  cornerRadius={6}                  // Rounded corners on arc segments (px)
  colors={['#5BE12C', '#F5CD19', '#EA4228']}  // HEX colors; length must equal nrOfLevels or
                                              // first/last are used for HSL interpolation
  textColor="#ffffff"               // Color of the percentage label
  fontSize="18px"                   // Font size override (auto-sized when omitted)
  needleColor="#464A4F"             // Needle triangle color
  needleBaseColor="#464A4F"         // Circle at needle base color
  needleScale={0.55}                // Needle length as a fraction of outer radius
  hideText={false}                  // Set true to suppress percentage label
  animate={true}                    // Animate needle on mount / percent change
  animDelay={500}                   // Delay before animation starts (ms)
  animateDuration={3000}            // Total animation duration (ms)
  formatTextValue={value => `${value}%`}  // Custom label formatter; receives rounded %
/>
```

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

### Import and Use GaugeChart Component

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Import the GaugeChart component from the library and use it in your React application. Ensure each chart has a unique `id` to avoid rendering issues.

```jsx
import GaugeChart from 'react-gauge-chart'

<GaugeChart id="gauge-chart1" />
```

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

### Minimal GaugeChart Usage

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Renders a default 3-level green-to-red arc with the needle at 40%. Requires a unique 'id' prop.

```jsx
import React from 'react';
import GaugeChart from 'react-gauge-chart';

// --- Minimal usage ---
<GaugeChart id="gauge-minimal" />
```

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

### GaugeChart Component Props

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

The GaugeChart component accepts various props to customize its appearance and behavior. Below is a detailed list of all available props, their types, descriptions, and default values.

```APIDOC
## GaugeChart Component Props

### Description
This section details all the configurable properties for the GaugeChart component.

### Props

| Name | PropType | Description | Default value |
|---|---|---|---|
| id | PropTypes.string.isRequired | Used for the identification of the div surrounding the chart |  |
| className | PropTypes.string | Add `className` to the div container |  |
| style | PropTypes.object | Add `style` to the div container | { width: '100%' } |
| marginInPercent | PropTypes.number | Margin for the chart inside the containing SVG element | 0.05 |
| cornerRadius | PropTypes.number | Corner radius for the elements in the chart | 6 |
| nrOfLevels | PropTypes.number | The number of elements displayed in the arc | 3 |
| percent | PropTypes.number | The number where the pointer should point to (between 0 and 1) | 0.4 |
| arcPadding | PropTypes.number | The distance between the elements in the arc | 0.05 |
| arcWidth | PropTypes.number | The thickness of the arc | 0.2 |
| colors | PropTypes.array | An array of colors in HEX format displayed in the arc | ["#00FF00", "#FF0000"] |
| textColor | PropTypes.string | The color of the text | "#FFFFFF" |
| fontSize | PropTypes.string | The font size of the text | none |
| needleColor | PropTypes.string | The color of the needle triangle | "#464A4F" |
| needleBaseColor | PropTypes.string | The color of the circle at the base of the needle | "#464A4F" |
| hideText | PropTypes.bool | Whether or not to hide the percentage display | false |
| arcsLength | PropTypes.array | An array specifying the length of each individual arc. If this prop is set, the nrOfLevels prop will have no effect | none |
| animate | PropTypes.bool | Whether or not to animate the needle when loaded | true |
| animDelay | PropTypes.number | Delay in ms before starting the needle animation | 500 |
| animateDuration | PropTypes.number | Duration in ms for the needle animation | 3000 |
| formatTextValue | PropTypes.func | Format you own text value (example: value => value+'%') | null |
| textComponent | PropTypes.elements | Custom text label textComponent | null |
| textComponentContainerClassName | PropTypes.string | Add `className` to the text component container |  |
| needleScale | PropTypes.number | Needle arc cornerRadius | 0.55 |
| customNeedleComponent | PropTypes.element | Custom needle component `Note: Make sure to rotate the needle as per the percentage value` | null |
| customNeedleComponentClassName | PropTypes.string | Add `className` to the custom needle container |  |
| customNeedleStyle | PropsTypes.object | Add `style` to custom needle container div |  |

### Colors for the chart

The colors could either be specified as an array of hex color values, such as `["#FF0000", "#00FF00", "#0000FF"]` where each arc would a color in the array (colors are assigned from left to right). If that is the case, then the **length of the array** must match the **number of levels** in the arc. If the number of colors does not match the number of levels, then the **first** and the **last** color from the colors array will be selected and the arcs will get colors that are interpolated between those. The interpolation is done using [d3.interpolateHsl](https://github.com/d3/d3-interpolate#interpolateHsl).
```

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

### <GaugeChart /> - Core Component

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

The primary component for rendering a gauge chart. It accepts various props to customize its appearance, behavior, and animation. An `id` prop is mandatory for each instance.

```APIDOC
## <GaugeChart /> - Core gauge chart component

The single exported component that renders an SVG-based semicircular gauge. It accepts a rich set of props to control arc appearance, needle styling, animation behavior, and text display. Each instance must receive a unique `id` prop to avoid rendering collisions. To prevent size jumps on prop updates, always set an explicit height on the wrapping container via the `style` prop.

### Props

- **id** (string) - Required - Unique identifier for the gauge chart.
- **style** (object) - Optional - CSS styles for the container element. Explicit height is recommended.
- **className** (string) - Optional - CSS class for the outer div.
- **marginInPercent** (number) - Optional - Inner SVG margin as a fraction of container width.
- **nrOfLevels** (number) - Optional - Number of arc segments.
- **percent** (number) - Optional - Needle position (0-1).
- **arcPadding** (number) - Optional - Gap between arc segments in radians.
- **arcWidth** (number) - Optional - Arc thickness as a fraction of radius.
- **cornerRadius** (number) - Optional - Rounded corners on arc segments (px).
- **colors** (array of strings) - Optional - HEX colors for arc segments.
- **textColor** (string) - Optional - Color of the percentage label.
- **fontSize** (string) - Optional - Font size override for the percentage label.
- **needleColor** (string) - Optional - Color of the needle triangle.
- **needleBaseColor** (string) - Optional - Color of the circle at the needle base.
- **needleScale** (number) - Optional - Needle length as a fraction of outer radius.
- **hideText** (boolean) - Optional - Suppress percentage label.
- **animate** (boolean) - Optional - Animate needle on mount / percent change.
- **animDelay** (number) - Optional - Delay before animation starts (ms).
- **animateDuration** (number) - Optional - Total animation duration (ms).
- **formatTextValue** (function) - Optional - Custom label formatter.
```

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

### Arc color configuration with colors prop

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Configure arc colors using an exact-match array (one color per level) or a two-color gradient pair. When lengths differ, D3's interpolateHsl generates a gradient.

```jsx
import GaugeChart from 'react-gauge-chart';

// Exact colors — array length must equal nrOfLevels (5)
<GaugeChart
  id="gauge-exact-colors"
  style={{ height: 250 }}
  nrOfLevels={5}
  colors={['#003f5c', '#58508d', '#bc5090', '#ff6361', '#ffa600']}
  percent={0.5}
/>
```

```jsx
// Gradient interpolation — only first and last color matter when lengths differ
<GaugeChart
  id="gauge-gradient"
  style={{ height: 250 }}
  nrOfLevels={30}
  colors={['#00FF00', '#FF0000']}  // Green → red gradient across 30 levels
  percent={0.6}
/>
```

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

### Gauge Chart with Custom Colors and Arc Width

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Customizes the chart's appearance with a defined color palette and arc width. `colors` accepts an array of color strings, and `arcWidth` controls the thickness of the gauge arcs.

```jsx
<GaugeChart id="gauge-chart3" 
  nrOfLevels={30} 
  colors={["#FF5F6D", "#FFC371"]} 
  arcWidth={0.3} 
  percent={0.37} 
/>
```

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

### Custom arc segment widths with arcsLength

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Use arcsLength to define proportional widths for each arc segment, overriding nrOfLevels. The colors array must match arcsLength in size. Values are relative weights.

```jsx
import GaugeChart from 'react-gauge-chart';

// Traffic-light style gauge: large safe zone, medium warning, small danger
<GaugeChart
  id="gauge-arcs"
  style={{ height: 250 }}
  arcsLength={[0.6, 0.3, 0.1]}       // 60% green, 30% yellow, 10% red
  colors={['#5BE12C', '#F5CD19', '#EA4228']}
  percent={0.78}                      // Needle is in the yellow zone
  arcPadding={0.02}
  arcWidth={0.25}
/>
// nrOfLevels is ignored here; three arcs of explicit proportional widths are rendered.
```

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

### GaugeChart with Fixed Height

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Prevents potential resize bugs by explicitly setting a fixed height for the chart container using the 'style' prop. Requires a unique 'id' prop.

```jsx
import React from 'react';
import GaugeChart from 'react-gauge-chart';

// --- Prevent resize bug: always supply a fixed height ---
const chartStyle = { height: 250 };
<GaugeChart id="gauge-fixed" style={chartStyle} percent={0.72} />
```

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

### Gauge Chart with Custom Corner Radius and Arc Padding

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Adjusts the chart's roundedness and spacing between arcs. `cornerRadius` affects the shape of the arc ends, and `arcPadding` adds space between adjacent levels.

```jsx
<GaugeChart id="gauge-chart4" 
  nrOfLevels={10} 
  arcPadding={0.1} 
  cornerRadius={3} 
  percent={0.6} 
/>
```

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

### Custom percentage label with formatTextValue

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Replace the default percentage label with custom text, units, or rounding using the formatTextValue function. The function receives the rounded percentage value.

```jsx
import GaugeChart from 'react-gauge-chart';

// Show raw score out of 100
<GaugeChart
  id="gauge-score"
  style={{ height: 250 }}
  percent={0.83}
  nrOfLevels={10}
  colors={['#5BE12C', '#F5CD19', '#EA4228']}
  formatTextValue={value => `${value} / 100`}
  // Displays: "83 / 100"
/>
```

```jsx
// Show network throughput units
<GaugeChart
  id="gauge-network"
  style={{ height: 250 }}
  percent={0.37}
  nrOfLevels={30}
  arcWidth={0.3}
  formatTextValue={value => `${value} kbit/s`}
  // Displays: "37 kbit/s"
/>
```

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

### Gauge Chart with Custom Arc Lengths and Colors

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Defines specific lengths for different color segments of the gauge. `arcsLength` is an array of proportions that sum to 1, dictating the distribution of colors.

```jsx
<GaugeChart id="gauge-chart5"
  nrOfLevels={420}
  arcsLength={[0.3, 0.5, 0.2]}
  colors={['#5BE12C', '#F5CD19', '#EA4228']}
  percent={0.37}
  arcPadding={0.02}
/>
```

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

### GaugeChart Component

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

The GaugeChart component is a React component for displaying a gauge chart. Ensure you use unique `id` props for each instance to avoid rendering issues.

```APIDOC
## GaugeChart Component

### Description

This component renders a gauge chart. It is important to assign a unique `id` prop to each instance of `GaugeChart` to ensure they are rendered correctly in their respective containers.

### Props

- **id** (string) - Required - A unique identifier for the chart instance.
- **nrOfLevels** (number) - Optional - The number of levels to display on the gauge.
- **percent** (number) - Optional - The percentage value to display on the gauge (e.g., 0.86 for 86%).
- **colors** (array of strings) - Optional - An array of color strings to define the gradient of the gauge.
- **arcWidth** (number) - Optional - The width of the arc as a fraction of the radius.
- **arcPadding** (number) - Optional - The padding between arcs.
- **cornerRadius** (number) - Optional - The radius of the corners of the arcs.
- **arcsLength** (array of numbers) - Optional - An array specifying the length of each arc segment.
- **animate** (boolean) - Optional - Whether to animate the chart rendering. Defaults to true.
- **needleColor** (string) - Optional - The color of the needle.

### Usage Examples

#### Default Chart
```jsx
<GaugeChart id="gauge-chart1" />
```

#### Chart with 20 levels and pointer at 86%
```jsx
<GaugeChart id="gauge-chart2" 
  nrOfLevels={20} 
  percent={0.86} 
/>
```

#### Chart with custom colors and larger arc width
```jsx
<GaugeChart id="gauge-chart3" 
  nrOfLevels={30} 
  colors={["#FF5F6D", "#FFC371"]}
  arcWidth={0.3} 
  percent={0.37} 
/>
```

#### Chart with other corner radius and larger padding between arcs
```jsx
<GaugeChart id="gauge-chart4" 
  nrOfLevels={10} 
  arcPadding={0.1} 
  cornerRadius={3} 
  percent={0.6} 
/>
```

#### Chart with custom arcs width
```jsx
<GaugeChart id="gauge-chart5"
  nrOfLevels={420}
  arcsLength={[0.3, 0.5, 0.2]}
  colors={['#5BE12C', '#F5CD19', '#EA4228']}
  percent={0.37}
  arcPadding={0.02}
/>
```

#### Chart with disabled animation
```jsx
<GaugeChart id="gauge-chart6" 
  animate={false} 
  nrOfLevels={15} 
  percent={0.56} 
  needleColor="#345243" 
/>
```
```

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

### Fully custom label element with textComponent

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Replace the built-in text label with any React element by providing it to the textComponent prop. Use textComponentContainerClassName for CSS targeting.

```jsx
import React from 'react';
import GaugeChart from 'react-gauge-chart';

const StatusBadge = ({ label, color }) => (
  <span style={{
    background: color,
    color: '#fff',
    padding: '2px 8px',
    borderRadius: 4,
    fontSize: 12,
    fontWeight: 'bold',
  }}>
    {label}
  </span>
);

<GaugeChart
  id="gauge-custom-text"
  style={{ height: 250 }}
  percent={0.78}
  nrOfLevels={3}
  colors={['#5BE12C', '#F5CD19', '#EA4228']}
  textComponent={<StatusBadge label="WARNING" color="#F5CD19" />}
  textComponentContainerClassName="gauge-label-wrapper"
/>
// The built-in percentage text is replaced by the custom badge element.
```

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

### Gauge Chart with Custom Colors

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Specify custom colors for the chart arcs using an array of hex color values. The length of the array should match the number of levels. If lengths do not match, colors are interpolated between the first and last values.

```jsx
["#FF0000", "#00FF00", "#0000FF"]
```

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

### Set Fixed Height for Gauge Chart

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

To prevent the chart from rerendering with a different size when props are updated, set a fixed height using the style prop.

```jsx
const chartStyle = {
  height: 250,
}

<GaugeChart id="gauge-chart1" style={chartStyle} />
```

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

### Custom needle element with customNeedleComponent

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Replace the default SVG needle with any React element using customNeedleComponent. You are responsible for rotating the custom element to match the percent value. Use customNeedleStyle and customNeedleComponentClassName for positioning and styling.

```jsx
import React from 'react';
import GaugeChart from 'react-gauge-chart';

// Simple arrow SVG used as a custom needle
const ArrowNeedle = ({ height, width }) => (
  <svg height={height} width={width} viewBox="0 0 50 100">
    <polygon points="25,0 50,100 0,100" fill="#d62728" />
  </svg>
);

<GaugeChart
  id="gauge-custom-needle"
  style={{ height: 250 }}
  nrOfLevels={20}
  percent={0.6}
  customNeedleComponent={
    <ArrowNeedle height="10rem" width="5rem" />
  }
  customNeedleStyle={{ bottom: '9.25rem', right: '0.5rem' }}
  customNeedleComponentClassName="custom-arrow"
/>
// Note: rotate the custom element externally based on percent to match gauge position.
```

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

### Hide Gauge Chart Percentage Label

Source: https://context7.com/martin36/react-gauge-chart/llms.txt

Set `hideText={true}` to remove the percentage text label beneath the gauge arc. This is ideal when the chart serves as a purely visual indicator and the label is displayed elsewhere.

```jsx
import GaugeChart from 'react-gauge-chart';

<GaugeChart
  id="gauge-no-text"
  style={{ height: 200 }}
  percent={0.45}
  nrOfLevels={5}
  hideText={true}
  colors={['#5BE12C', '#EA4228']}
/>
// The arc and needle render normally; no percentage text is displayed.
```

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

### Gauge Chart with Disabled Animation

Source: https://github.com/martin36/react-gauge-chart/blob/master/README.md

Disables the animation effect when the chart loads or updates. Set `animate` to `false` to prevent transitions. Also includes options for needle color.

```jsx
<GaugeChart id="gauge-chart6" 
  animate={false} 
  nrOfLevels={15} 
  percent={0.56} 
  needleColor="#345243" 
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.