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

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

LinearGaugeSeries

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

LinearGaugeBar

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

LinearGaugeOuterBar

Name	Type	Default
`height`	`number` Height of the chart. Set by `LinearGauge` component.
`width`	`number` Width of the chart. Set by `LinearGauge` component.
`fill`	`string` Fill for the bar element.	`'#484848'`