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

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

RadialGaugeSeries

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

StackedRadialGaugeSeries

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

RadialGaugeArc

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

RadialGaugeLabel

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

StackedRadialGaugeValueLabel

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

StackedRadialGaugeDescriptionLabel

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

RadialGaugeValueLabel

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