Radial Bar Chart

A Radial or Circular Bar Chart in REAVIZ is used for displaying circular data, which involves wrapping the usual bar chart or histogram around a circle. Each bar in the chart is centered at the middle of the group period, with the length of the bar proportional to the frequency in the group.

Where to use:

Display Circular Data: Ideal for representing data in a circular format.
Compare Categories: Useful for comparing categories or data points in a circular layout.
Visualize Frequency: Great for visualizing the frequency of data points within groups.

Quick Start

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

import { RadialBarChart } from 'reaviz';


export default function App() {
  return (
    <RadialBarChart
      height={400}
      width={400}
      data={[
        { key: new Date('11/27/2019'), data: 9 },
        { key: new Date('11/28/2019'), data: 6 },
        { key: new Date('11/29/2019'), data: 3 },
        { key: new Date('11/30/2019'), data: 11 },
        { key: new Date('12/1/2019'), data: 6 },
        { key: new Date('12/2/2019'), data: 16 },
        { key: new Date('12/3/2019'), data: 8 }
      ]}
    />
  );
}

import { RadialBarChart } from 'reaviz';

export default function App() {
  return (
    <RadialBarChart
      height={400}
      width={400}
      data={[
        { key: new Date('11/27/2019'), data: 9 },
        { key: new Date('11/28/2019'), data: 6 },
        { key: new Date('11/29/2019'), data: 3 },
        { key: new Date('11/30/2019'), data: 11 },
        { key: new Date('12/1/2019'), data: 6 },
        { key: new Date('12/2/2019'), data: 16 },
        { key: new Date('12/3/2019'), data: 8 }
      ]}
    />
  );
}

Examples

API

RadialBarChart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartDataShape[]`
`series`	The series component that renders the bar components. `ReactElement<RadialBarSeriesProps, FC<Partial<RadialBarSeriesProps>>>`	`<RadialBarSeries />`
`axis`	The radial axis component for the chart. `ReactElement<RadialAxisProps, FC<Partial<RadialAxisProps>>>`	`<RadialAxis />`
`innerRadius`	The inner radius for the chart center. `number`	`10`
`startAngle`	Start angle for the first value. `number`	`0`
`endAngle`	End angle for the last value. `number`	`2 * Math.PI`
`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`	`75`
`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`

RadialBarSeries (opens in a new tab)

Prop	Description	Default
`data`	Parsed data shape. Set internally by `RadialBarChart`. `ChartInternalDataShape[]`
`colorScheme`	Color scheme for the series. `ColorSchemeType`	`schemes.cybertron[0]`
`innerRadius`	The inner radius for the chart center. `number`
`outerRadius`	The outer radius for the chart center. `number`
`xScale`	D3 scale for X Axis. Set internally by `RadialBarChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `RadialBarChart`. `any`
`id`	Id set internally by `RadialBarChart`. `string`
`bar`	Bar that is rendered. `ReactElement<RadialBarProps, FC<Partial<RadialBarProps>>>`	`<RadialBar />`
`animated`	Whether to animate the enter/update/exit. `boolean`	`true`
`height`	Height of the chart. Set internally by `RadialBarChart`. `number`
`width`	Width of the chart. Set internally by `RadialBarChart`. `number`
`tooltip`	Tooltip for the chart area. `ReactElement<TooltipAreaProps, ForwardRefExoticComponent<Partial<TooltipAreaProps> & RefAttributes<any>>>`	`<TooltipArea tooltip={<ChartTooltip followCursor={true} />} />`
`startAngle`	Start angle for the first value. `number`	`0`
`endAngle`	End angle for the last value. `number`	`2 * Math.PI`
`type`	The type of the chart. `RadialBarSeriesType`	`standard`
`valueMarkers`	Value markers line for the chart. `ReactElement<RadialValueMarkerProps, FC<RadialValueMarkerProps>>[]`

RadialBar (opens in a new tab)

Prop	Description	Default
`data`	Parsed data shape. Set internally by `RadialBarChart`. `ChartInternalShallowDataShape`
`innerRadius`	The inner radius for the chart center. `number`
`index`	Index of the element in the series. Set internally by `RadialBarSeries`. `number`
`animated`	Whether the element is active or not. Set internally by `RadialBarSeries`. `boolean`
`xScale`	D3 scale for X Axis. Set internally by `RadialBarChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `RadialBarChart`. `any`
`color`	Color of the bar. `any`
`gradient`	Whether to use gradient or not. `boolean`	`true`
`id`	Id set internally by `RadialBarSeries`. `string`
`barCount`	Total number of bars used for animation. Set internally by `RadialBarSeries`. `number`
`innerBarCount`	Total number of nested bars inside each group. Set internally by `RadialBarSeries`. `number`
`groupIndex`	Index of the group. Set internally by `BarSeries`. `number`
`className`	CSS classes to apply. `string`
`curved`	Whether the bar is curved or not. `boolean`	`false`
`guide`	Guide bar component. `ReactElement<RadialGuideBarProps, FC<Partial<RadialGuideBarProps>>>`	`<RadialGuideBar />`
`active`	Active caused by hover. `boolean`
`onClick`	Event for when a symbol is clicked. `(event: any) => void`	`() => undefined`
`onMouseEnter`	Event for when the symbol has mouse enter. `(event: any) => void`	`() => undefined`
`onMouseLeave`	Event for when the symbol has mouse leave. `(event: any) => void`	`() => undefined`

Radial Area Chart Radial Gauge