Linear Gauge

A Linear Gauge in REAVIZ uses a linear scale to display a specific data point using a dial over a linear scale with defined limits. This type of gauge is ideal for showing how a value fits within a range.

Types supported by reaviz:

Where to use:

Display Single Values: Ideal for showing specific data points within a range.
Track Metrics: Useful for tracking metrics such as risk scores or performance indicators.
Compare Multiple Values: Great for comparing multiple values in a clear, linear format.

Quick Start

To create a Linear Gauge, use import the LinearGauge and give it data. The chart will automatically configure itself with the default options exposed via props.

import { LinearGauge } from 'reaviz';


export default function App() {
  return (
    <LinearGauge
      width={300}
      height={100}
      data={{ key: 'Risk Score', data: 74 }}
    />
  );
}

import { LinearGauge } from 'reaviz';

export default function App() {
  return (
    <LinearGauge
      width={300}
      height={100}
      data={{ key: 'Risk Score', data: 74 }}
    />
  );
}

In this example, we only pass one data object, however, we can pass multiples and it will distribute the values across them.

Examples

Single-series gauges

Multi-series gauges

API

LinearGauge

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartShallowDataShape \| ChartShallowDataShape[]`
`series`	The series component that renders the bar components. `ReactElement<LinearGaugeSeriesProps, FC<Partial<LinearGaugeSeriesProps>>>`	`<LinearGaugeSeries />`
`minValue`	Min value to scale on. Only applicable for single-series. `number`	`0`
`maxValue`	Max value to scale on. Only applicable for single-series. `number`	`100`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

LinearGaugeSeries

Prop	Description	Default
`height`	Height of the chart. Set by `LinearGauge` component. `number`
`width`	Width of the chart. Set by `LinearGauge` component. `number`
`isMultiSeries`	Whether its a multi-series or not. Set by `LinearGauge` component. `boolean`
`bar`	Bar element. Only applicable for single series. `ReactElement<BarProps, FC<Partial<BarProps>>>`	`<LinearGaugeBar />`
`outerBar`	Outer bar element. Only applicable for single series. `ReactElement<LinearGaugeOuterBarProps, FC<Partial<LinearGaugeOuterBarProps>>>`	`<LinearGaugeOuterBar />`
`data`	Parsed data shape. Set internally by `BarChart`. `ChartInternalDataShape[]`
`id`	Id of the bar chart. Set internally by `BarChart`. `string`
`xScale`	D3 scale for X Axis. Set internally by `BarChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `BarChart`. `any`
`xScale1`	D3 scale for X Multi-Group Axis. Set internally by `BarChart`. `any`
`type`	Type of the chart. `BarType`
`colorScheme`	Color scheme for the chart. `ColorSchemeType`
`animated`	Whether the chart is animated or not. `boolean`
`padding`	Amount of padding between each bar. `number`
`groupPadding`	Amount of padding between each group. `number`
`isCategorical`	Whether the chart is categorical or not. Set internally by `BarChart`. `boolean`
`layout`	Direction of the chart `Direction`
`binSize`	The size of each bin/bucket in the bar chart. `number`
`tooltip`	Tooltip for the chart area. `ReactElement<TooltipAreaProps, ForwardRefExoticComponent<Partial<TooltipAreaProps> & RefAttributes<any>>>`
`valueMarkers`	Value markers line for the chart. `ReactElement<LinearValueMarkerProps, FC<LinearValueMarkerProps>>[]`

LinearGaugeBar

Prop	Description	Default
`active`	Whether the bar is active or not. `boolean`
`activeBrightness`	Chroma brightness factor to brighten the active bar. See https://gka.github.io/chroma.js/#color-brighten for more info. `number`
`xScale`	D3 scale for X Axis. Set internally by `BarChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `BarChart`. `any`
`xScale1`	D3 scale for X Multi-Group Axis. Set internally by `BarChart`. `any`
`data`	Parsed data shape. Set internally by `BarChart`. `ChartInternalShallowDataShape`
`id`	Id set internally by `BarChart`. `string`
`gradient`	Gradient shades for the bar. `ReactElement<GradientProps, FC<Partial<GradientProps>>>`
`rx`	SVG rx attribute for the bar. `number`
`ry`	SVG ry attribute for the bar. `number`
`width`	Width of the bar. Set internally by `BarSeries`. `number`
`padding`	Padding for the bar groups. `number`
`barCount`	Total number of bars used for animation. Set internally by `BarSeries`. `number`
`color`	Color callback for the bar. `any`
`cursor`	Cursor for the bar element. `string`
`barIndex`	Index of the bar. Set internally by `BarSeries`. `number`
`groupIndex`	Index of the group. Set internally by `BarSeries`. `number`
`animated`	Whether to animate the enter/update/exit. Set internally by `BarSeries`. `boolean`
`isCategorical`	Whether this is categorical chart or not. Set internally by `BarSeries`. `boolean`
`rangeLines`	Rangelines element. for the bar. `ReactElement<RangeLinesProps, FC<Partial<RangeLinesProps>>>`
`mask`	Mask element for the bar. `ReactElement<MaskProps, FC<MaskProps>>`
`tooltip`	Tooltip element. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`
`layout`	Direction of the chart. Set internally by `BarSeries`. `Direction`
`type`	Type of bar chart. Set internally by `BarSeries`. `BarType`
`label`	Label element. `ReactElement<BarLabelProps, FC<Partial<BarLabelProps>>>`
`targetMarker`	Target marker element. `ReactElement<BarTargetMarkerProps, FC<Partial<BarTargetMarkerProps>>>`
`guide`	Guide bar component. `ReactElement<GuideBarProps, FC<Partial<GuideBarProps>>>`
`minHeight`	Force a min height on the bar. `number`
`glow`	Glow styling for the bar. `Glow`
`onClick`	Event for when the bar is clicked. `(event: ClickEvent) => void`
`onMouseEnter`	Event for when the bar has mouse enter. `(event: any) => void`
`onMouseLeave`	Event for when the bar has mouse leave. `(event: any) => void`
`onMouseMove`	Event for when a bar has mouse move. `(event: any) => void`
`className`	Classnames to apply to the element. `any`
`style`	CSS styles to apply to the element. `any`

LinearGaugeOuterBar

Prop	Description	Default
`height`	Height of the chart. Set by `LinearGauge` component. `number`
`width`	Width of the chart. Set by `LinearGauge` component. `number`
`fill`	Fill for the bar element. `string`	`#484848`
`x`	The `x` property of the DOMRect interface represents the x-coordinate of the rectangle, which is the horizontal distance between the viewport's left edge and the rectangle's origin. [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/x) `number`
`y`	The `y` property of the DOMRect interface represents the y-coordinate of the rectangle, which is the vertical distance between the viewport's top edge and the rectangle's origin. [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect/y) `number`
`bottom`	The `bottom` read-only property of the `DOMRectReadOnly` interface returns the bottom coordinate value of the `DOMRect`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/bottom) `number`
`left`	The `left` read-only property of the `DOMRectReadOnly` interface returns the left coordinate value of the `DOMRect`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/left) `number`
`right`	The `right` read-only property of the `DOMRectReadOnly` interface returns the right coordinate value of the `DOMRect`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/right) `number`
`top`	The `top` read-only property of the `DOMRectReadOnly` interface returns the top coordinate value of the `DOMRect`. [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/top) `number`
`toJSON`	The DOMRectReadOnly method `toJSON()` returns a JSON representation of the `DOMRectReadOnly` object. [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/toJSON) `() => any`