Radial Gauge

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

Types supported by reaviz:

Single - Displays a single data point on a radial scale.
Stacked - Displays multiple data points stacked within the same radial gauge.

Where to use:

Display Single Values: Ideal for showing a specific value within a circular range.
Track Metrics: Useful for tracking performance metrics against a target.
Compare Multiple Values: Great for comparing multiple values within the same gauge.

Quick Start

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

import { RadialGauge } from 'reaviz';


export default function App() {
  return (
    <RadialGauge
      height={300}
      width={300}
      data={[{ key: 'Austin, TX', data: 75 }]}
    />
  );
}

import { RadialGauge } from 'reaviz';

export default function App() {
  return (
    <RadialGauge
      height={300}
      width={300}
      data={[{ key: 'Austin, TX', data: 75 }]}
    />
  );
}

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

Examples

Single

Stacked

API

RadialGauge

Prop	Description	Default
`data` *	Data the chart will receive to render. `ChartDataShape[]`
`minValue`	Min value to scale on. `number \| number[]`	`0`
`maxValue`	Max value to scale on. `number \| number[]`	`100`
`startAngle`	Start angle for the first value. `number`	`0`
`endAngle`	End angle for the last value. `number`	`Math.PI * 2`
`series`	Gauge series component to render. `ReactElement<RadialGaugeSeriesProps \| StackedRadialGaugeSeriesProps, FC<Partial<RadialGaugeSeriesProps>> \| FC<...>>`	`<RadialGaugeSeries />`
`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`

RadialGaugeSeries

Prop	Description	Default
`id`	Unique id for the series. `string`
`data`	Data to render set by `RadialGauge` component. `ChartShallowDataShape[]`
`scale`	D3 scale function set by `RadialGauge` component. `any`
`startAngle`	Start angle set by `RadialGauge` component. `number`
`endAngle`	Start angle set by `RadialGauge` component. `number`
`arcWidth`	The "thickness" of the arcs `number`	`5`
`width`	Width set by `RadialGauge` component. `number`
`height`	Height set by `RadialGauge` component. `number`
`padding`	Padding between each gauge. `number`	`20`
`colorScheme`	Color scheme to apply. `ColorSchemeType`	`['#00ECB1']`
`innerArc`	Arc component. `ReactElement<RadialGaugeArcProps, FC<Partial<RadialGaugeArcProps>>>`	`<RadialGaugeArc />`
`outerArc`	Outer arc component. This is the 'fill' element. `ReactElement<RadialGaugeArcProps, FC<Partial<RadialGaugeArcProps>>>`	`<RadialGaugeOuterArc />`
`label`	Label component. `ReactElement<RadialGaugeLabelProps, FC<Partial<RadialGaugeLabelProps>>>`	`<RadialGaugeLabel />`
`valueLabel`	Value label component. `ReactElement<RadialGaugeValueLabelProps, FC<Partial<RadialGaugeValueLabelProps>>>`	`<RadialGaugeValueLabel />`
`minGaugeWidth`	Min width for a gauge. Only applicable in multi-series gauges. `number`	`50`

StackedRadialGaugeSeries

Prop	Description	Default
`data`	Data to render set by `RadialGauge` component. `ChartDataShape[]`
`scale`	D3 scale function set by `RadialGauge` component. `any`
`startAngle`	Start angle set by `RadialGauge` component. `number`
`endAngle`	Start angle set by `RadialGauge` component. `number`
`width`	Width set by `RadialGauge` component. `number`
`height`	Height set by `RadialGauge` component. `number`
`colorScheme`	Color scheme to apply. `ColorSchemeType`	`['#00ECB1']`
`innerArc`	Arc component. `ReactElement<RadialGaugeArcProps, FC<Partial<RadialGaugeArcProps>>>`	`<RadialGaugeArc animated={true} />`
`stackedInnerArc`	Stacked Arc component. `ReactElement<RadialGaugeStackedArcProps, FC<Partial<RadialGaugeStackedArcProps>>>`	`<RadialGaugeStackedArc animated={true} />`
`outerArc`	Outer arc component. This is the 'fill' element. `ReactElement<RadialGaugeArcProps, FC<Partial<RadialGaugeArcProps>>>`	`<RadialGaugeArc disabled={true} animated={false} />`
`label`	Label component. `ReactElement<StackedRadialGaugeValueLabelProps, FC<Partial<StackedRadialGaugeValueLabelProps>>>`	`<StackedRadialGaugeValueLabel />`
`descriptionLabel`	Description label component. `ReactElement<StackedRadialGaugeDescriptionLabelProps, FC<Partial<StackedRadialGaugeDescriptionLabelProps>>>`
`fillFactor`	A factor from 0 to 1 determining how much of the Gauge should be filled with arcs `number`	`0.2`
`arcPadding`	Padding between the stacked arcs, following d3 bandwidth innerPadding `number`	`0.15`

RadialGaugeArc

Prop	Description	Default
`id`	ID generated by the chart. `string`
`data`	Data set by the `RadialGaugeSeries` components. `ChartShallowDataShape`
`startAngle`	Start angle set by the `RadialGaugeSeries` components. `number`
`endAngle`	End angle set by the `RadialGaugeSeries` components. `number`
`innerRadius`	Inner radius set by the `RadialGaugeSeries` components. `number`
`outerRadius`	Outer radius set by the `RadialGaugeSeries` components. `number`
`color`	Color set by the `RadialGaugeSeries` components. `any`	`#353d44`
`cornerRadius`	Corner Radius of the arcs, see https://github.com/d3/d3-shape#arc_cornerRadius `number`	`0`
`padAngle`	Pad Angle between adjacent arcs, see https://github.com/d3/d3-shape#arc_padAngle `number`	`0`
`padRadius`	Pad Radius between adjacent arcs, see https://github.com/d3/d3-shape#arc_padRadius `number`
`animated`	Animation set by the `RadialGaugeSeries` component. `boolean`	`true`
`disabled`	Disable the interactions. `boolean`	`false`
`fill`	Fill the arc. `string`
`gradient`	Gradient shades for the bar. `ReactElement<GradientProps, FC<Partial<GradientProps>>>`
`tooltip`	Tooltip component. `ReactElement<ChartTooltipProps, FC<Partial<ChartTooltipProps>>>`	`<ChartTooltip />`
`onClick`	Event for when the arc is clicked. `(event: any) => void`
`onMouseEnter`	Event for when the arc has mouse enter. `(event: any) => void`
`onMouseLeave`	Event for when the arc has mouse leave. `(event: any) => void`

RadialGaugeLabel

Prop	Description	Default
`data`	Data set by the `RadialGaugeSeries` component. `ChartShallowDataShape`
`offset`	Offset set by the `RadialGaugeSeries` component. `number`
`className`	Classname to apply to the label. `any`
`onClick`	Label click event. `(event: { data: any; nativeEvent: any; }) => void`	`() => undefined`

StackedRadialGaugeValueLabel

Prop	Description	Default
`label`	A label shown at the center `string`
`className`	A class name to apply `string`
`yOffset`	A y offset to apply to the label `number`	`0`

StackedRadialGaugeDescriptionLabel

Prop	Description	Default
`label`	A label shown at the center `string`
`className`	A class name to apply `string`
`yOffset`	A y offset to apply to the label `number`	`0`

RadialGaugeValueLabel

Prop	Description	Default
`data`	Data set by the `RadialGaugeSeries` component. `ChartShallowDataShape`
`className`	Classname to apply to the value label. `any`