Meter

Meter charts in REAVIZ are effective tools for visualizing a single value within a predefined range. They provide a clear and intuitive way to display metrics, making them ideal for dashboards and performance tracking. Whether you're showing progress towards a goal or tracking a specific metric, REAVIZ's Meter charts offer a straightforward and visually appealing solution.

Where to use:

Display Single Values: Perfect for showing a specific value within a defined range.
Track Performance: Useful for tracking performance metrics against a target.
Show Progress: Great for visualizing progress towards a goal.

Quick Start

To create a meter, use import the Meter and give it value point.

import { Meter } from 'reaviz';


export default function App() {
  return (
    <Meter value={50} style={{ width: 300 }} />
  );
}

import { Meter } from 'reaviz';

export default function App() {
  return (
    <Meter value={50} style={{ width: 300 }} />
  );
}

Examples

API

Meter (opens in a new tab)

Prop	Description	Default
`value`	The value of the meter. `number`
`min`	The minimum value of the meter. `number`	`0`
`max`	The maximum value of the meter. `number`	`100`
`columns`	The number of columns to display. `number`	`10`
`className`	Additional class names to apply. `string`
`gap`	The gap between columns. `number`	`15`
`style`	Additional styles to apply. `CSSProperties`	`{}`
`column`	The column to render. `ReactElement<MeterColumnProps, FC<Partial<MeterColumnProps>>>`	`<MeterColumn />`

MeterColumn (opens in a new tab)

Prop	Description	Default
`value`	The value of the meter. `number`
`height`	The height of the column. `number`	`32`
`index`	The index of the column. `number`
`scale`	The scale to use. `any`
`activeFill`	The active fill color. `string`	`schemes.cybertron[0]`
`inActiveFill`	The inactive fill color. `string`	`#414242`
`className`	Additional class names to apply. `string`
`count`	The total number of columns. Set internally. `number`
`animated`	Whether to animate the column. `boolean`	`true`

Map Pie Chart