Meter

Segmented column strip showing a value as filled/unfilled blocks. Useful for discrete progress or threshold indicators.

Import

import { Meter, MeterColumn } from 'reaviz';

Meter Props

MeterColumn Props

Basic Usage

<Meter value={75} />

Custom Range and Segments

<Meter
  value={350}
  min={0}
  max={500}
  columns={20}
  gap={8}
/>

Custom Colors

<Meter
  value={60}
  column={
    <MeterColumn
      height={24}
      activeFill="#2196F3"
      inActiveFill="#1a1a1a"
    />
  }
/>

Compact Meter

<Meter
  value={40}
  columns={5}
  gap={4}
  column={<MeterColumn height={16} />}
/>

No Animation

<Meter
  value={80}
  column={<MeterColumn animated={false} />}
/>

Notes

• Renders as SVG rectangles, not HTML
• Segments fill left-to-right based on the value's position within the min/max range
• Each segment animates in with staggered delay when animated is true