Radial Area Chart

A Radial Area Chart in REAVIZ is a variation of the Area Chart. While a standard area chart displays quantitative data graphically, a radial area chart presents this data in a circular layout. The area between the axis and line is commonly emphasized with colors, textures, and hatchings. Radial Area Charts can represent cumulative totals over time or display categories.

When to use:

Visualize Cumulative Totals: Ideal for displaying cumulative data over time or categories.
Highlight Trends: Useful for highlighting trends and patterns in data.
Show Categories in a Circular Layout: Great for visualizing data categories in a radial format.

Quick Start

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

import { RadialAreaChart } from 'reaviz';


export default function App() {
  const data = [
    {
      id: "50",
      key: new Date("2020-01-13T08:00:00.000Z"),
      data: 16,
    },
    {
      id: "49",
      key: new Date("2020-01-14T08:00:00.000Z"),
      data: 44,
    },
    {
      id: "48",
      key: new Date("2020-01-15T08:00:00.000Z"),
      data: 12,
    },
    {
      id: "47",
      key: new Date("2020-01-16T08:00:00.000Z"),
      data: 26,
    },
    {
      id: "46",
      key: new Date("2020-01-17T08:00:00.000Z"),
      data: 41,
    }
  ];


  return (
    <RadialAreaChart
      height={400}
      width={400}
      data={data}
    />
  );
}

import { RadialAreaChart } from 'reaviz';

export default function App() {
  const data = [
    {
      id: "50",
      key: new Date("2020-01-13T08:00:00.000Z"),
      data: 16,
    },
    {
      id: "49",
      key: new Date("2020-01-14T08:00:00.000Z"),
      data: 44,
    },
    {
      id: "48",
      key: new Date("2020-01-15T08:00:00.000Z"),
      data: 12,
    },
    {
      id: "47",
      key: new Date("2020-01-16T08:00:00.000Z"),
      data: 26,
    },
    {
      id: "46",
      key: new Date("2020-01-17T08:00:00.000Z"),
      data: 41,
    }
  ];

  return (
    <RadialAreaChart
      height={400}
      width={400}
      data={data}
    />
  );
}

Examples

API

RadialAreaChart (opens in a new tab)

Prop	Description	Default
`data`	Data the chart will receive to render. `ChartDataShape[]`
`series`	The series component that renders the area components. `ReactElement<RadialAreaSeriesProps, FC<Partial<RadialAreaSeriesProps>>>`	`<RadialAreaSeries />`
`innerRadius`	The radial axis component for the chart. `number`	`0.1`
`axis`	The inner radius for the chart center. `ReactElement<RadialAxisProps, FC<Partial<RadialAxisProps>>>`	`<RadialAxis />`
`startAngle`	Start angle for the first value. `number`	`0`
`endAngle`	End angle for the last value. `number`	`2 * Math.PI`
`isClosedCurve`	Whether the curve should be closed. Set to true by deafult `boolean`	`true`
`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`

RadialAreaSeries (opens in a new tab)

Prop	Description	Default
`data`	Parsed data shape. Set internally by `RadialAreaChart`. `ChartInternalShallowDataShape[]`
`type`	The type of the chart. `RadialPointSeriesType`	`standard`
`colorScheme`	Color scheme for the series. `ColorSchemeType`	`schemes.cybertron`
`outerRadius`	The outer radius for the chart center. `number`
`innerRadius`	The inner radius for the chart center. `number`
`xScale`	D3 scale for X Axis. Set internally by `RadialAreaChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `RadialAreaChart`. `any`
`id`	Id set internally by `RadialAreaChart`. `string`
`interpolation`	interpolation set internally by `RadialAreaChart`. `RadialInterpolationTypes`	`smooth`
`animated`	Whether to animate the enter/update/exit. `boolean`	`true`
`height`	Height of the chart. Set internally by `RadialAreaChart`. `number`
`width`	Width of the chart. Set internally by `RadialAreaChart`. `number`
`area`	Area that is rendered. `ReactElement<RadialAreaProps, FC<Partial<RadialAreaProps>>>`	`<RadialArea />`
`line`	Line that is rendered. `ReactElement<RadialLineProps, FC<Partial<RadialLineProps>>>`	`<RadialLine />`
`symbols`	Symbols used to show points. `ReactElement<RadialPointSeriesProps, FC<Partial<RadialPointSeriesProps>>>`	`<RadialPointSeries />`
`tooltip`	Tooltip for the chart area. `ReactElement<TooltipAreaProps, ForwardRefExoticComponent<Partial<TooltipAreaProps> & RefAttributes<any>>>`	`<TooltipArea />`
`startAngle`	Start angle for the first value. `number`	`0`
`endAngle`	End angle for the last value. `number`	`2 * Math.PI`
`isClosedCurve`	Whether the curve should be closed. Set to true by deafult `boolean`	`true`
`valueMarkers`	Value markers line for the chart. `ReactElement<RadialValueMarkerProps, FC<RadialValueMarkerProps>>[]`

RadialArea (opens in a new tab)

Prop	Description	Default
`data`	Parsed data shape. Set internally by `RadialAreaChart`. `ChartInternalShallowDataShape[]`
`animated`	Whether to animate the enter/update/exit. `boolean`
`xScale`	D3 scale for X Axis. Set internally by `RadialAreaChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `RadialAreaChart`. `any`
`interpolation`	Interpolation for the area. Set internally by `RadialAreaSeries`. `RadialInterpolationTypes`
`color`	Color for the area. Set internally by `RadialAreaSeries`. `any`
`id`	Id set internally by `RadialAreaSeries`. `string`
`innerRadius`	The inner radius for the chart center. `number`
`outerRadius`	The outer radius for the chart center. `number`
`className`	CSS classes to apply. `string`
`index`	Index of the area in the series. Set internally by `RadialAreaSeries`. `number`
`gradient`	Gradient to apply to the area. `ReactElement<RadialGradientProps, FC<Partial<RadialGradientProps>>>`	`<RadialGradient />`
`isClosedCurve`	Whether the curve should be closed. Set to true by deafult `boolean`	`true`

RadialLine (opens in a new tab)

Prop	Description	Default
`data`	Parsed data shape. Set internally by `RadialAreaChart`. `ChartInternalShallowDataShape[]`
`animated`	Whether to animate the enter/update/exit. Set internally by `RadialAreaSeries`. `boolean`	`true`
`xScale`	D3 scale for X Axis. Set internally by `RadialAreaChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `RadialAreaChart`. `any`
`color`	Color for the area. Set internally by `RadialAreaSeries`. `any`
`interpolation`	Interpolation for the area. Set internally by `RadialAreaSeries`. `RadialInterpolationTypes`
`index`	Index of the area in the series. Set internally by `RadialAreaSeries`. `number`
`strokeWidth`	Stroke width of the line. `number`	`2`
`className`	CSS classes to apply. `string`
`hasArea`	Internal property to identify if there is a area or not. `boolean`
`isClosedCurve`	Whether the curve should be closed. Set to true by deafult `boolean`	`true`

RadialPointSeries (opens in a new tab)

Prop	Description	Default
`animated`	Whether the points are animated or not. `boolean`
`color`	Color scheme. `any`
`index`	Index of the area in the series. Set internally by `RadialAreaSeries`. `number`
`activeValues`	Active values set by parent. `any`
`data`	Parsed data object. `ChartInternalShallowDataShape[]`
`yScale`	D3 X-Scale. `any`
`xScale`	D3 Y-Scale. `any`
`show`	When to show the point. `boolean \| "hover" \| "first" \| "last"`	`hover`
`point`	Point react component. `ReactElement<RadialScatterPointProps, FC<Partial<RadialScatterPointProps>>>`	`<RadialScatterPoint />`

Radar Radial Bar Chart