### Setup and Run Documentation Site

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Navigate to the 'docs' directory, install its dependencies, and start the development server for the documentation site. This allows you to preview documentation changes locally.

```bash
cd docs
npm install
npm run dev
```

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

### Install JustGage using npm

Source: https://github.com/toorshia/justgage/blob/master/README.md

This command installs the JustGage library using npm, making it available for use in your project. Ensure you have Node.js and npm installed.

```bash
npm install justgage
```

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

### Conventional Commit Examples

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Provides practical examples of commit messages adhering to the Conventional Commits specification, demonstrating different types and scopes.

```bash
git commit -m "feat(core): add custom sector support for value ranges"
git commit -m "fix(api): resolve animation callback timing issues"
git commit -m "docs(playground): add responsive gauge size example"
```

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

### Install Project Dependencies

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Install the necessary Node.js dependencies for the JustGage project using npm. This command should be run in the root directory of the cloned repository.

```bash
npm install
```

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

### Install JustGage via NPM or Yarn

Source: https://context7.com/toorshia/justgage/llms.txt

Instructions for installing the JustGage library using package managers like NPM or Yarn. It also mentions CDN usage for direct browser inclusion.

```bash
# NPM
npm install justgage

# Yarn
yarn add justgage

# CDN (UMD build for browser)
# <script src="https://unpkg.com/justgage@latest/dist/justgage.umd.js"></script>
```

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

### Example JustGage Unit Test

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

An example of a unit test written for the JustGage library using a testing framework like Jest. It demonstrates how to instantiate a gauge and assert its default configuration.

```typescript
// Example test
describe('JustGage', () => {
  it('should create gauge with default configuration', () => {
    const gauge = new JustGage({ id: 'test-gauge', value: 50 });
    expect(gauge.config.min).toBe(0);
    expect(gauge.config.max).toBe(100);
  });
});
```

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

### Basic JustGage Initialization in JavaScript

Source: https://github.com/toorshia/justgage/blob/master/README.md

This JavaScript code snippet demonstrates how to initialize a basic JustGage instance. It requires the 'justgage' library to be imported and assumes an HTML element with the ID 'my-gauge' exists to render the gauge. The gauge is configured with an ID, a starting value, and minimum/maximum limits.

```javascript
import { JustGage } from 'justgage';

const gauge = new JustGage({
  id: 'my-gauge',
  value: 75,
  min: 0,
  max: 100,
});
```

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

### Display Sector Colors as Background in JavaScript Gauge

Source: https://context7.com/toorshia/justgage/llms.txt

Demonstrates using `showSectorColors: true` to display all defined sector colors as a fixed background for the gauge. This example also includes configuration for a pointer needle to indicate the current value.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-fixed-sectors" style="width: 400px; height: 320px;"></div>

const fixedSectorGauge = new JustGage({
  id: 'gauge-fixed-sectors',
  value: 45,
  min: 0,
  max: 100,
  title: 'Temperature',
  label: '°C',
  showSectorColors: true,    // Display all sector colors as background
  customSectors: {
    ranges: [
      { lo: 0, hi: 20, color: '#3498db' },    // Blue: Cold
      { lo: 20, hi: 40, color: '#2ecc71' },   // Green: Normal
      { lo: 40, hi: 60, color: '#f1c40f' },   // Yellow: Warm
      { lo: 60, hi: 80, color: '#e67e22' },   // Orange: Hot
      { lo: 80, hi: 100, color: '#e74c3c' }   // Red: Critical
    ]
  },
  pointer: true,             // Show pointer needle to indicate value
  pointerOptions: {
    toplength: 10,
    bottomlength: 15,
    bottomwidth: 8,
    color: '#333333'
  }
});

// Output: All sector colors visible as background with pointer at 45
```

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

### Create a JavaScript Donut Gauge

Source: https://context7.com/toorshia/justgage/llms.txt

Shows how to create a full-circle donut-style gauge using JustGage. This configuration enables donut mode and allows customization of the start angle, gauge width, and background color.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-donut" style="width: 250px; height: 250px;"></div>

const donutGauge = new JustGage({
  id: 'gauge-donut',
  value: 75,
  min: 0,
  max: 100,
  donut: true,               // Enable donut mode (full circle)
  donutStartAngle: 90,       // Start from top (90 degrees)
  title: 'Memory',
  label: 'GB',
  gaugeWidthScale: 0.6,      // Thinner gauge arc (0.1 to 2.0)
  gaugeColor: '#2c3e50',     // Background color of gauge track
  levelColors: ['#3498db', '#9b59b6', '#e74c3c']
});

// Output: Renders a circular donut-style gauge with 75% filled
```

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

### Get JustGage Value and Configuration (JavaScript)

Source: https://context7.com/toorshia/justgage/llms.txt

Illustrates how to retrieve the current value of a JustGage gauge using 'getValue()' and its complete configuration object using 'getConfig()'. These methods are useful for monitoring gauge state and accessing its settings programmatically. The 'getConfig()' method returns a copy of the configuration.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-getters" style="width: 400px; height: 320px;"></div>

const gauge = new JustGage({
  id: 'gauge-getters',
  value: 67,
  min: 0,
  max: 100,
  title: 'Status',
  label: '%'
});

// Get current value
const currentValue = gauge.getValue();
console.log('Current value:', currentValue);
// Output: Current value: 67

// Get full configuration (returns a copy)
const config = gauge.getConfig();
console.log('Min:', config.min);
console.log('Max:', config.max);
console.log('Title:', config.title);
console.log('Level Colors:', config.levelColors);
// Output: Min: 0, Max: 100, Title: Status, Level Colors: ['#a9d70b', '#f9c802', '#ff0000']

// Update and verify
gauge.refresh(85);
console.log('New value:', gauge.getValue());
// Output: New value: 85
```

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

### Configure Reverse Gauge Direction

Source: https://context7.com/toorshia/justgage/llms.txt

Reverses the gauge fill direction to start from the right side. This is useful for countdown timers or specific UI requirements where a right-to-left progression is preferred.

```javascript
import JustGage from 'justgage';

const reverseGauge = new JustGage({
  id: 'gauge-reverse',
  value: 25,
  min: 0,
  max: 100,
  reverse: true,
  title: 'Countdown',
  label: 'remaining',
  levelColors: ['#e74c3c', '#f1c40f', '#2ecc71']
});
```

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

### Build JustGage Project

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Compile and build the JustGage project for distribution. This command generates the production-ready files, typically found in the 'dist/' directory.

```bash
npm run build
```

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

### Run JustGage Tests with Options

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Shows commands to run tests for the JustGage project with different options: all tests, watch mode for continuous testing, and tests with code coverage reporting.

```bash
# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage
```

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

### Share Default Configuration Across JustGage Gauges (JavaScript)

Source: https://context7.com/toorshia/justgage/llms.txt

Demonstrates how to define and apply a common set of default configurations to multiple JustGage instances using the 'defaults' option. This promotes consistency and reduces code duplication. Overrides can be applied to individual gauges.

```javascript
import JustGage from 'justgage';

// Define shared defaults
const gaugeDefaults = {
  min: 0,
  max: 100,
  gaugeColor: '#2c3e50',
  gaugeWidthScale: 0.8,
  levelColors: ['#27ae60', '#f1c40f', '#e74c3c'],
  valueFontColor: '#ecf0f1',
  labelFontColor: '#bdc3c7',
  titleFontColor: '#ecf0f1',
  startAnimationTime: 500,
  refreshAnimationTime: 300
};

// Create multiple gauges with shared settings
const gauge1 = new JustGage({
  id: 'gauge-1',
  value: 45,
  title: 'CPU',
  label: '%',
  defaults: gaugeDefaults    // Apply shared defaults
});

const gauge2 = new JustGage({
  id: 'gauge-2',
  value: 72,
  title: 'Memory',
  label: '%',
  defaults: gaugeDefaults,
  levelColors: ['#3498db', '#9b59b6']  // Override specific setting
});

const gauge3 = new JustGage({
  id: 'gauge-3',
  value: 30,
  title: 'Disk',
  label: '%',
  defaults: gaugeDefaults
});

// Output: Three gauges with consistent styling
```

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

### TypeScript Guidelines for JustGage

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Demonstrates best practices for writing TypeScript code within the JustGage project, including interface definitions, access modifiers, and JSDoc comments for public APIs.

```typescript
// Define clear interfaces
interface GaugeConfig {
  id: string;
  value: number;
  min?: number;
  max?: number;
  // ... other options
}

// Use proper access modifiers
class JustGage {
  private canvas: SVGElement;
  public config: GaugeConfig;

  constructor(config: GaugeConfig) {
    this.validateConfig(config);
    // ...
  }

  /**
   * Updates the gauge value with animation
   * @param value - New value to display
   * @param animate - Whether to animate the change
   */
  public refresh(value: number, animate: boolean = true): void {
    // Implementation
  }
}
```

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

### Create a Basic JavaScript Gauge

Source: https://context7.com/toorshia/justgage/llms.txt

Demonstrates how to create a basic semi-circular JustGage. It requires a container element ID, value, min/max range, and optional title and label. The output is an animated gauge showing the specified value.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-cpu" style="width: 400px; height: 320px;"></div>

const gauge = new JustGage({
  id: 'gauge-cpu',           // Container element ID
  value: 67,                 // Current value
  min: 0,                    // Minimum value
  max: 100,                  // Maximum value
  title: 'CPU Usage',        // Title above gauge
  label: '%',                // Unit label below value
  levelColors: ['#a9d70b', '#f9c802', '#ff0000']  // Green -> Yellow -> Red
});

// Output: Renders an animated gauge showing 67% with color gradient
```

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

### Clone JustGage Repository

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Clone the JustGage repository to your local machine. This is the first step in setting up your development environment. Ensure you replace 'YOUR_USERNAME' with your GitHub username.

```bash
git clone https://github.com/YOUR_USERNAME/justgage.git
cd justgage
```

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

### Run JustGage Project Tests

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Execute the test suite for the JustGage project using npm. This command verifies the current state of the codebase and ensures new changes do not introduce regressions.

```bash
npm test
```

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

### Initialize JustGage Instances with Various Options (JavaScript)

Source: https://github.com/toorshia/justgage/blob/master/sector-colors-demo.html

Initializes multiple JustGage instances with different configurations, including regular gauges, donut gauges, sector colors, custom sectors, and reverse direction. These gauges are stored in a global `gauges` object for easy access and manipulation. Dependencies include the JustGage library.

```javascript
const gauges = {};
gauges.regular1 = new JustGage({
  id: 'regular-gauge1',
  value: 48,
  min: 0,
  max: 100,
  title: 'CPU Usage',
  label: '%',
  levelColors: ['#00ff00', '#ffff00', '#ff8c00', '#ff0000']
});
gauges.sector1 = new JustGage({
  id: 'sector-gauge1',
  value: 48,
  min: 0,
  max: 100,
  title: 'Memory Usage',
  label: '%',
  showSectorColors: true,
  levelColors: ['#00ff00', '#ffff00', '#ff8c00', '#ff0000']
});
gauges.regularDonut = new JustGage({
  id: 'regular-donut',
  value: 48,
  min: 0,
  max: 100,
  title: 'Storage',
  label: 'GB',
  donut: true,
  levelColors: ['#00ff00', '#ffff00', '#ff0000']
});
gauges.sectorDonut = new JustGage({
  id: 'sector-donut',
  value: 48,
  min: 0,
  max: 100,
  title: 'Network',
  label: 'MB/s',
  donut: true,
  showSectorColors: true,
  levelColors: ['#00ff00', '#ffff00', '#ff0000']
});
gauges.customSectors = new JustGage({
  id: 'custom-sectors',
  value: 48,
  min: 0,
  max: 100,
  title: 'Temperature',
  label: '°C',
  showSectorColors: true,
  customSectors: {
    ranges: [
      { lo: 0, hi: 40, color: '#00bfff' },
      { lo: 40, hi: 70, color: '#32cd32' },
      { lo: 70, hi: 100, color: '#ff4500' }
    ]
  }
});
gauges.levelColors = new JustGage({
  id: 'level-colors',
  value: 48,
  min: 0,
  max: 100,
  title: 'Bandwidth',
  label: 'Mbps',
  showSectorColors: true,
  levelColors: ['#9400d3', '#4169e1', '#32cd32', '#ff1493']
});
gauges.normalDirection = new JustGage({
  id: 'normal-direction',
  value: 48,
  min: 0,
  max: 100,
  title: 'Progress',
  label: '%',
  showSectorColors: true,
  levelColors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4']
});
gauges.reverseDirection = new JustGage({
  id: 'reverse-direction',
  value: 48,
  min: 0,
  max: 100,
  title: 'Countdown',
  label: '%',
  reverse: true,
  showSectorColors: true,
  levelColors: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4']
});
```

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

### Enable Responsive Gauge Sizing

Source: https://context7.com/toorshia/justgage/llms.txt

Allows the gauge to scale automatically based on the dimensions of its parent container. This is essential for building fluid, mobile-friendly dashboard layouts.

```javascript
const responsiveGauge = new JustGage({
  id: 'gauge-responsive',
  value: 65,
  min: 0,
  max: 100,
  title: 'Responsive',
  relativeGaugeSize: true
});
```

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

### Implement Human-Friendly Number Formatting

Source: https://context7.com/toorshia/justgage/llms.txt

Enables automatic scaling of large numbers using K/M/G suffixes or comma separators. This improves readability for large data sets like revenue or analytics metrics.

```javascript
const humanGauge = new JustGage({
  id: 'gauge-human',
  value: 1500000,
  min: 0,
  max: 5000000,
  title: 'Revenue',
  label: '$',
  humanFriendly: true,
  humanFriendlyDecimal: 2
});

const commaGauge = new JustGage({
  id: 'gauge-comma',
  value: 1234567,
  min: 0,
  max: 5000000,
  formatNumber: true
});
```

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

### Implement Differential Gauge Mode

Source: https://context7.com/toorshia/justgage/llms.txt

Configures the gauge to fill from a center point, ideal for visualizing positive or negative variance. Requires 'differential' set to true and a range spanning negative and positive values.

```javascript
const diffGauge = new JustGage({
  id: 'gauge-diff',
  value: 30,
  min: -100,
  max: 100,
  differential: true,
  title: 'Variance',
  label: '%',
  levelColors: ['#e74c3c', '#3498db']
});

diffGauge.refresh(-45);
```

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

### Customize Min/Max Labels for JustGage (JavaScript)

Source: https://context7.com/toorshia/justgage/llms.txt

Shows how to override the default minimum and maximum labels ('0' and '100') with custom text using 'minTxt' and 'maxTxt'. The 'showMinMax' and 'hideMinMax' options control the visibility of these labels, allowing for complete customization or complete hiding.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-minmax" style="width: 400px; height: 320px;"></div>

const customMinMaxGauge = new JustGage({
  id: 'gauge-minmax',
  value: 55,
  min: 0,
  max: 100,
  minTxt: 'Empty',           // Custom min label
  maxTxt: 'Full',            // Custom max label
  title: 'Tank Level',
  showMinMax: true,          // Ensure min/max labels are shown
  hideMinMax: false          // Don't hide them
});

// Output: Shows "Empty" and "Full" instead of "0" and "100"

// Hide min/max entirely
const noMinMaxGauge = new JustGage({
  id: 'gauge-no-minmax',
  value: 75,
  min: 0,
  max: 100,
  hideMinMax: true           // Hide min/max labels completely
});
```

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

### Initialize Gauge with parentNode

Source: https://context7.com/toorshia/justgage/llms.txt

Allows direct injection of the gauge into a DOM element reference instead of relying on an ID string. Useful for dynamically generated components in modern frameworks.

```javascript
const container = document.createElement('div');
const nodeGauge = new JustGage({
  parentNode: container,
  value: 55,
  min: 0,
  max: 100,
  title: 'Dynamic Container'
});
```

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

### Use Custom Sector Colors in JavaScript Gauge

Source: https://context7.com/toorshia/justgage/llms.txt

Illustrates how to define custom color ranges for a JustGage using the `customSectors` option. This allows assigning specific colors to value thresholds instead of relying on gradients, with `noGradient` set to true for solid colors.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-sectors" style="width: 400px; height: 320px;"></div>

const sectorGauge = new JustGage({
  id: 'gauge-sectors',
  value: 65,
  min: 0,
  max: 100,
  title: 'Health Score',
  customSectors: {
    percents: false,         // Use absolute values (not percentages)
    ranges: [
      { lo: 0, hi: 30, color: '#e74c3c' },    // Red: 0-30
      { lo: 30, hi: 50, color: '#f39c12' },   // Orange: 30-50
      { lo: 50, hi: 70, color: '#f1c40f' },   // Yellow: 50-70
      { lo: 70, hi: 90, color: '#27ae60' },   // Green: 70-90
      { lo: 90, hi: 100, color: '#2ecc71' }   // Bright Green: 90-100
    ]
  },
  noGradient: true           // Use solid colors per sector (no blending)
});

// Output: Gauge shows yellow color since value 65 falls in 50-70 range
```

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

### Configure Pointer Needle in JustGage

Source: https://context7.com/toorshia/justgage/llms.txt

Enables a visual pointer needle on the gauge arc to indicate current values. Requires the 'pointer' property set to true and allows customization of dimensions, colors, and stroke styles.

```javascript
import JustGage from 'justgage';

const pointerGauge = new JustGage({
  id: 'gauge-pointer',
  value: 82,
  min: 0,
  max: 100,
  title: 'Speed',
  label: 'km/h',
  pointer: true,
  pointerOptions: {
    toplength: 15,
    bottomlength: 10,
    bottomwidth: 12,
    color: '#000000',
    stroke: '#ffffff',
    stroke_width: 2,
    stroke_linecap: 'round'
  },
  levelColors: ['#2ecc71', '#f1c40f', '#e74c3c']
});
```

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

### Conventional Commit Message Format

Source: https://github.com/toorshia/justgage/blob/master/CONTRIBUTING.md

Illustrates the structure for commit messages following the Conventional Commits specification. This format helps in automating changelog generation and standardizing commit history.

```bash
<type>(<scope>): <description>

[optional body]

[optional footer(s)]
```

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

### Add Target Line to JustGage

Source: https://context7.com/toorshia/justgage/llms.txt

Displays a static target line on the gauge to represent goals or thresholds. Configured via 'targetLine', 'targetLineColor', and 'targetLineWidth' properties.

```javascript
import JustGage from 'justgage';

const targetGauge = new JustGage({
  id: 'gauge-target',
  value: 72,
  min: 0,
  max: 100,
  title: 'Quarterly Sales',
  label: '%',
  targetLine: 80,
  targetLineColor: '#e74c3c',
  targetLineWidth: 3,
  levelColors: ['#3498db', '#2ecc71']
});
```

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

### Demonstrate Static Sector Colors with Value Changes (JavaScript)

Source: https://github.com/toorshia/justgage/blob/master/sector-colors-demo.html

Uses `setTimeout` to automatically call the `updateValue` function at intervals, changing the gauge values. This is intended to demonstrate that while the gauge values change, the sector colors (if enabled) remain static and do not automatically adjust to the new value ranges. This highlights a specific behavior of the JustGage library's sector color implementation.

```javascript
console.log('JustGage Sector Colors Demo loaded!');
console.log('Available gauges:', Object.keys(gauges));
setTimeout(() => {
  console.log('Automatically changing values to demonstrate static sectors...');
  updateValue(75);
}, 3000);
setTimeout(() => {
  updateValue(25);
}, 6000);
```

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

### Handle Animation Callbacks

Source: https://context7.com/toorshia/justgage/llms.txt

Executes custom code once gauge animations finish using the onAnimationEnd hook. Supports various easing types like bounce, elastic, and linear transitions.

```javascript
const callbackGauge = new JustGage({
  id: 'gauge-callback',
  value: 0,
  min: 0,
  max: 100,
  title: 'Loading',
  startAnimationTime: 2000,
  startAnimationType: 'bounce',
  onAnimationEnd: function() {
    console.log('Animation completed! Current value:', this.config.value);
  }
});
callbackGauge.refresh(100);
```

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

### Customize Value Display with textRenderer

Source: https://context7.com/toorshia/justgage/llms.txt

Provides a callback function to define custom logic for how the gauge value is displayed as text. This allows for conditional labels based on the current numeric value.

```javascript
const textGauge = new JustGage({
  id: 'gauge-text',
  value: 72.5,
  min: 0,
  max: 100,
  title: 'Status',
  textRenderer: (value) => {
    if (value >= 90) return 'Excellent';
    if (value >= 70) return 'Good (' + value.toFixed(1) + '%)';
    if (value >= 50) return 'Fair';
    if (value >= 30) return 'Poor';
    return 'Critical!';
  }
});
```

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

### Customize JustGage Title Position (JavaScript)

Source: https://context7.com/toorshia/justgage/llms.txt

Explains how to control the placement of the gauge title using the 'titlePosition' option, allowing it to be displayed either 'above' (default) or 'below' the gauge visualization. Additional options for title font styling are also demonstrated.

```javascript
import JustGage from 'justgage';

// Title above (default)
const gaugeAbove = new JustGage({
  id: 'gauge-title-above',
  value: 60,
  min: 0,
  max: 100,
  title: 'Title Above',
  titlePosition: 'above',        // Default position
  titleFontColor: '#2c3e50',
  titleFontFamily: 'Helvetica, Arial, sans-serif',
  titleFontWeight: 'bold'
});

// Title below
const gaugeBelow = new JustGage({
  id: 'gauge-title-below',
  value: 60,
  min: 0,
  max: 100,
  title: 'Title Below',
  titlePosition: 'below',        // Position title under gauge
  titleFontColor: '#7f8c8d',
  titleMinFontSize: 12           // Minimum font size
});

// Output: Two gauges with different title positions
```

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

### Display Remaining Value in JustGage (JavaScript)

Source: https://context7.com/toorshia/justgage/llms.txt

Demonstrates how to configure a JustGage to display the remaining value needed to reach the maximum instead of the current value, using the 'displayRemaining' option. This feature, combined with 'symbol', allows for custom representations like progress indicators.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-remaining" style="width: 400px; height: 320px;"></div>

const remainingGauge = new JustGage({
  id: 'gauge-remaining',
  value: 73,
  min: 0,
  max: 100,
  title: 'Project Progress',
  displayRemaining: true,    // Show remaining instead of current
  symbol: '% left'           // Custom symbol for remaining
});

// Output: Displays "27% left" (100 - 73 = 27) instead of "73"
```

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

### Enable Inner Shadow on JustGage

Source: https://context7.com/toorshia/justgage/llms.txt

This snippet demonstrates how to enable and configure the inner shadow effect for a JustGage gauge. It requires the JustGage library and a target HTML element. The output is a gauge with a 3D appearance due to the applied shadow.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-shadow" style="width: 400px; height: 320px;"></div>

const shadowGauge = new JustGage({
  id: 'gauge-shadow',
  value: 70,
  min: 0,
  max: 100,
  title: 'With Shadow',
  showInnerShadow: true,     // Enable inner shadow
  shadowOpacity: 0.3,        // Shadow opacity (0-1)
  shadowSize: 5,             // Blur radius
  shadowVerticalOffset: 3    // Vertical offset from top
});

// Output: Gauge with subtle inner shadow effect
```

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

### Destroy JustGage Gauge Instance (JavaScript)

Source: https://context7.com/toorshia/justgage/llms.txt

Shows how to properly remove a JustGage gauge instance from the DOM and release associated resources using the 'destroy()' method. This is crucial for cleanup, especially when dynamically creating and removing gauges. It allows for recreating a gauge in the same container afterwards.

```javascript
import JustGage from 'justgage';

// HTML: <div id="gauge-destroy" style="width: 400px; height: 320px;"></div>

const gauge = new JustGage({
  id: 'gauge-destroy',
  value: 50,
  min: 0,
  max: 100,
  title: 'Temporary'
});

// Later, when gauge is no longer needed:
gauge.destroy();
// Output: SVG removed, animations cancelled, references cleared

// Safe to recreate gauge in same container
const newGauge = new JustGage({
  id: 'gauge-destroy',
  value: 75,
  min: 0,
  max: 100,
  title: 'Recreated'
});
```

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

### Update Gauge Values with Refresh Method

Source: https://context7.com/toorshia/justgage/llms.txt

Updates the gauge value dynamically with smooth animations. Supports updating the value, range, and labels, and can be used for live data streaming.

```javascript
const gauge = new JustGage({
  id: 'gauge-refresh',
  value: 50,
  min: 0,
  max: 100,
  title: 'Live Data',
  label: '%',
  refreshAnimationTime: 1000,
  refreshAnimationType: '<>',
  counter: true
});

gauge.refresh(85);
gauge.refresh(150, 200);
gauge.refresh(75, 100, 0, 'Updated %');

setInterval(() => {
  const newValue = Math.floor(Math.random() * 100);
  gauge.refresh(newValue);
}, 2000);
```

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

### Modify Gauge Appearance with Update Method

Source: https://context7.com/toorshia/justgage/llms.txt

Allows dynamic changes to gauge properties like colors, fonts, and labels without re-instantiating the object. Accepts either a key-value pair or an object of multiple properties.

```javascript
const gauge = new JustGage({ id: 'gauge-update', value: 60, min: 0, max: 100, title: 'Status' });

gauge.update('valueFontColor', '#e74c3c');

gauge.update({
  gaugeColor: '#34495e',
  levelColors: ['#1abc9c', '#3498db', '#9b59b6'],
  labelFontColor: '#ffffff',
  titleFontColor: '#ecf0f1',
  symbol: '%',
  decimals: 1
});

gauge.update('targetLine', 75);
gauge.update('title', 'New Title');
```

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

### Update All Gauge Values Dynamically (JavaScript)

Source: https://github.com/toorshia/justgage/blob/master/sector-colors-demo.html

Defines a function `updateValue` that takes a new value and updates all initialized JustGage instances to this value using their `refresh` method. This function is useful for demonstrating dynamic updates and observing gauge behavior. It relies on the globally accessible `gauges` object.

```javascript
function updateValue(value) {
  console.log(`Updating all gauges to ${value}%`);
  Object.values(gauges).forEach(gauge => {
    gauge.refresh(value);
  });
}
```

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

### Toggle Sector Colors for JustGauges (JavaScript)

Source: https://github.com/toorshia/justgage/blob/master/sector-colors-demo.html

Implements a `toggleSectorColors` function that switches the `showSectorColors` option for specific JustGage instances. This function demonstrates how to programmatically enable or disable sector coloring on gauges that support this feature. It updates a boolean flag and then iterates through a predefined list of gauges to apply the change.

```javascript
let sectorColorsEnabled = true;
function toggleSectorColors() {
  sectorColorsEnabled = !sectorColorsEnabled;
  console.log(`Toggling sector colors: ${sectorColorsEnabled ? 'ON' : 'OFF'}`);
  [gauges.sector1, gauges.sectorDonut, gauges.customSectors, gauges.levelColors, gauges.normalDirection, gauges.reverseDirection].forEach(gauge => {
    gauge.update('showSectorColors', sectorColorsEnabled);
  });
}
```

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