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

Name	Type	Default
`data`	`ChartDataShape[]` Data the chart will receive to render.	`[]`
`series`	`ReactElement<AreaSeriesProps, FC<Partial<AreaSeriesProps>>>` The series component that renders the area/line/circles components.	`<AreaSeries />`
`yAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the Y Axis of the chart.	`<LinearYAxis type="value" />`
`xAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>` The linear axis component for the X Axis of the chart.	`<LinearXAxis type="time" />`
`gridlines`	`ReactElement<GridlineSeriesProps, FC<Partial<GridlineSeriesProps>>> \| null` The chart’s background gridlines component.	`<GridlineSeries />`
`brush`	`ReactElement<ChartBrushProps, FC<Partial<ChartBrushProps>>> \| null` The chart’s brush component.
`zoomPan`	`ReactElement<ChartZoomPanProps, FC<Partial<ChartZoomPanProps>>> \| null` The chart’s zoom pan component.
`secondaryAxis`	`ReactElement<LinearAxisProps, FC<Partial<LinearAxisProps>>>[]` Any secondary axis components. Useful for multi-axis charts.
`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.

AreaSeries

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

Area

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

Line

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

PointSeries

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