Area Chart

Area Charts are excellent for showing trends over time, allowing for a clear visualization of data relationships. With REAVIZ, you can easily create and customize Area Charts just in few minutes!

Types supported by reaviz:

Where to use:

Track Trends Over Time: Ideal for showing how data evolves over a period, such as stock prices or temperature changes.
Compare Multiple Categories: Useful for visualizing data for different categories in a single view, like sales figures for different products.
Show Cumulative Totals: Good for displaying cumulative data, such as total revenue over months.
Highlight Overall Trends: Better for emphasizing the overall pattern or trend rather than precise data points.
Visualize Continuous Data: Effective for continuous data where the area between the x-axis and the line is significant.

Quick Start

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

import { AreaChart } from 'reaviz';


export default function App() {
  return (
    <AreaChart
      height={300}
      width={300}
      data={[
        { key: new Date('11/29/2019'), data: 10 },
        { key: new Date('11/30/2019'), data: 7 },
        { key: new Date('12/1/2019'), data: 14 },
      ]}
    />
  );
}

import { AreaChart } from 'reaviz';

export default function App() {
  return (
    <AreaChart
      height={300}
      width={300}
      data={[
        { key: new Date('11/29/2019'), data: 10 },
        { key: new Date('11/30/2019'), data: 7 },
        { key: new Date('12/1/2019'), data: 14 },
      ]}
    />
  );
}

Examples

Single Series

Multi Series

Stacked

Stacked Normalized

Customization

You can customize the Area Chart by using various props:

colorScheme: Array of colors for the chart.
gridlines: Toggle gridlines on or off.
area: Customize the appearance of the area.
legend and tooltips: Enhance your chart by adding legends and tooltips for better data interpretation.

API

AreaChart (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/line/circles components. `ReactElement<AreaSeriesProps, FC<Partial<AreaSeriesProps>>>`	`<AreaSeries />`
`yAxis`	The linear axis component for the Y Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`	`<LinearYAxis type="value" />`
`xAxis`	The linear axis component for the X Axis of the chart. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>`	`<LinearXAxis type="time" />`
`gridlines`	The chart's background gridlines component. `ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>>`	`<GridlineSeries />`
`brush`	The chart's brush component. `ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>>`	`null`
`zoomPan`	The chart's zoom pan component. `ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>>`	`null`
`secondaryAxis`	Any secondary axis components. Useful for multi-axis charts. `ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]`
`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`

AreaSeries (opens in a new tab)

Prop	Description	Default
`id`	Id set internally by `AreaChart`. `string`
`xScale`	D3 scale for X Axis. Set internally by `AreaChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `AreaChart`. `any`
`data`	Parsed data shape. Set internally by `AreaChart`. `ChartInternalDataShape[]`
`height`	Height of the chart. Set internally by `AreaChart`. `number`
`width`	Width of the chart. Set internally by `AreaChart`. `number`
`animated`	Whether to animate the enter/update/exit. `boolean`	`true`
`type`	Type of area chart to render. `AreaChartTypes`	`standard`
`interpolation`	Interpolation type for the area/line. `InterpolationTypes`	`linear`
`tooltip`	Tooltip for the chart area. `ReactElement<TooltipAreaProps, ForwardRefExoticComponent<Partial<TooltipAreaProps> & RefAttributes<any>>>`	`<TooltipArea />`
`markLine`	Markline for the chart. `ReactElement<MarkLineProps, FC<Partial<MarkLineProps>>>`	`<MarkLine />`
`symbols`	Symbols used to show points. `ReactElement<PointSeriesProps, FC<Partial<PointSeriesProps>>>`	`<PointSeries />`
`line`	Line that is rendered. `ReactElement<LineProps, FC<Partial<LineProps>>>`	`<Line />`
`area`	Area that is rendered. `ReactElement<AreaProps, FC<Partial<AreaProps>>>`	`<Area />`
`colorScheme`	Color scheme for the series. `ColorSchemeType`	`cybertron`
`isZoomed`	Whether the chart has been zoomed or not. Set internally by `AreaChart`. `boolean`
`valueMarkers`	Value markers line for the chart. `ReactElement<LinearValueMarkerProps, FC<LinearValueMarkerProps>>[]`

Area (opens in a new tab)

Prop	Description	Default
`id`	Id set internally by `AreaSeries`. `string`
`data`	Parsed data shape. Set internally by `AreaChart`. `ChartInternalDataShape[]`
`interpolation`	Interpolation for the area. Set internally by `AreaSeries`. `InterpolationTypes`	`linear`
`color`	Color for the area. Set internally by `AreaSeries`. `any`
`xScale`	D3 scale for X Axis. Set internally by `AreaChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `AreaChart`. `any`
`index`	Index of the area in the series. Set internally by `AreaSeries`. `number`
`total`	Total number of areas in the series. Set internally by `AreaSeries`. `number`
`animated`	Whether to animate the enter/update/exit. Set internally by `AreaSeries`. `boolean`
`mask`	Mask to apply to the area. `ReactElement<MaskProps, FC<MaskProps>>`
`gradient`	Gradient to apply to the area. `ReactElement<GradientProps, FC<Partial<GradientProps>>>`	`<Gradient />`
`glow`	Glow to apply to the area. `Glow`
`className`	Classnames to apply to the element. `any`
`style`	CSS styles to apply to the element. `any`

Line (opens in a new tab)

Prop	Description	Default
`id`	Id set internally by `AreaChart`. `string`
`data`	Parsed data shape. Set internally by `AreaChart`. `ChartInternalDataShape[]`
`width`	Width of the chart. Set internally by `AreaChart`. `number`
`interpolation`	Interpolation for the area. Set internally by `AreaSeries`. `InterpolationTypes`
`color`	Color for the area. Set internally by `AreaSeries`. `any`
`xScale`	D3 scale for X Axis. Set internally by `AreaChart`. `any`
`yScale`	D3 scale for Y Axis. Set internally by `AreaChart`. `any`
`index`	Index of the area in the series. Set internally by `AreaSeries`. `number`
`animated`	Whether to animate the enter/update/exit. Set internally by `AreaSeries`. `boolean`
`strokeWidth`	Stroke width of the line. `number`	`3`
`showZeroStroke`	Show the stroke if there is no value. `boolean`	`true`
`hasArea`	Internal property to identify if there is a area or not. `boolean`
`gradient`	Gradient to apply to the line. `ReactElement<GradientProps, FC<Partial<GradientProps>>>`
`glow`	Glow to apply to the line. `Glow`
`className`	Classnames to apply to the element. `any`
`style`	CSS styles to apply to the element. `any`

PointSeries (opens in a new tab)

Prop	Description	Default
`animated`	Determines if the points should be animated or not. `boolean`
`color`	The color of the points. `any`
`activeValues`	The active values for the points. `any`
`data`	The data for the points. `ChartInternalShallowDataShape[]`
`yScale`	The y-scale for the points. `any`
`xScale`	The x-scale for the points. `any`
`id`	The unique identifier for the points. `string`
`height`	The height of the points. `number`
`width`	The width of the points. `number`
`show`	Determines when the points should be shown. Can be a boolean or one of the following strings: 'hover', 'first', 'last'. `boolean \| "hover" \| "first" \| "last"`	`hover`
`point`	The point element. `ReactElement<ScatterPointProps, FC<Partial<ScatterPointProps>>>`	`<ScatterPoint />`
`index`	The index of the points. `number`

Custom Charts Bar Chart