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

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

MeterColumn

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