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

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

RadialBarSeries

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

RadialBar

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