react-gauge-component

The library provides several 'Effects' interfaces to add visual depth:

• PointerEffects: Supports glow (with glowColor, glowBlur, glowSpread) and dropShadow (with dx, dy, blur, color, opacity).
• LabelEffects: Supports glow and textShadow for enhanced readability.
• TickEffects: Supports glow for tick lines.
• SubArcEffects: Allows overriding inherited effects from the parent Arc using the inherit: false flag.

The colorArray prop allows you to define colors for the gauge arcs. You can pass an array of hex color values (e.g., ['#FF0000', '#00FF00']).

Behavior:

• Exact Match: If the array length matches the number of levels in the arc, each segment receives its corresponding color.
• Interpolation: If the array length does not match the number of levels, colors are interpolated sequentially across all segments using d3.interpolateHsl. For example, a 3-color array applied to 9 segments will create a smooth transition from the first color to the last.

You can install the package using any of the following package managers:

npm install react-gauge-component --save

pnpm add react-gauge-component --save

yarn add react-gauge-component

bun add react-gauge-component

Because the component may rely on browser-specific APIs, you must use dynamic imports with ssr: false when using it in a Next.js environment to prevent Server-Side Rendering errors.

import dynamic from "next/dynamic";

const GaugeComponent = dynamic(
  () => import('react-gauge-component'),
  { ssr: false }
);

// Component with default values
<GaugeComponent />

Import the GaugeComponent and render it within your application. You can use either a default import or a named import depending on your environment setup.

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

// Component with default values
<GaugeComponent />

The GaugeComponent is the primary entry point for creating responsive gauge charts. It is built with D3 and supports multiple gauge types (semicircle, radial, grafana). It automatically handles resizing via ResizeObserver and supports customizable arcs, pointers, labels, and tooltips.

To use it, import the component and provide it with a configuration object matching GaugeComponentProps.

import GaugeComponent from 'react-gauge-component';

const MyGauge = () => (
  <div style={{ width: '300px', height: '300px' }}>
    <GaugeComponent 
      value={50} 
      minValue={0} 
      maxValue={100} 
      type="semicircle" 
    />
  </div>
);

To make the gauge interactive (allowing users to change the value), use the onValueChange prop. This is typically used in conjunction with a state variable in your component.

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

To display multiple pointers simultaneously, use the pointers prop instead of the single value and pointer props. When pointers is provided, it takes precedence.

Each object in the pointers array can define its own value, color, and label.

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

To handle interactions in multi-pointer mode, use the onPointerChange callback, which provides the index of the pointer and its new value.

You can override the default rendering of labels (like the value label) using the renderContent function within the labels prop. This allows you to inject custom JSX, such as adding units or custom styling.

Signature: renderContent: (value: number, color: string) => React.ReactNode

<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>
      )
    }
  }}
/>