Area Chart

An Area chart is a graphical representation of an asset's historical price action that connects a series of data points with a continuous line. This is the most basic type of chart used in finance and typically only depicts a security's closing prices over time. Here, area charts are developed with react-vis.

Live Editor

Usage

1 . Import AreaChart after installation

import { AreaChart } from "@k2/rv-viz";

2 . Add data or URL to AreaChart component.

<AreaChart data={AreaChartData} />

// or

<AreaChart url="server/api/data" />

Examples

Basic Area Chart: Demo

import { AreaChart } from "@k2/rv-viz";

const data = [

{

curve: "curveMonotoneX",

data: [

{ x: 0, y: 8 },

{ x: 1, y: 9 },

{ x: 2, y: 11 },

{ x: 3, y: 11 },

{ x: 4, y: 13 },

{ x: 5, y: 14 },

{ x: 6, y: 16 },

],

name: "seriesOne",

color: "#85be50",

},

];

function RenderChart() {

return <AreaChart data={data} />;

}

Area With Zoning: Demo

import { AreaChart } from "@k2/rv-viz";

const data = [

{

name: "seriesOne",

color: "#e5be20",

curve: "curveMonotoneX",

data: [

{ x: 0, y: 8 },

{ x: 1, y: 9 },

{ x: 2, y: 11 },

{ x: 3, y: 11 },

{ x: 4, y: 13 },

{ x: 5, y: 14 },

{ x: 6, y: 16 },

],

},

];

const zone = {

axis: "x",

domain: [0, 6],

range: [

{

color: {

name: "series1",

startingColor: "red",

endingColor: "#ffffff",

},

end: 1,

},

{

color: {

name: "series2",

startingColor: "orange",

endingColor: "#ffffff",

},

end: 5,

},

{

color: {

name: "series3",

startingColor: "green",

endingColor: "#ffffff",

},

end: 6,

},

],

};

function RenderChart() {

return <AreaChart data={data} zone={zone} />;

}

Stacked Area Chart: Demo

import { AreaChart } from "@k2/rv-viz";

/**

* @param stroke: for line as top boundary.

* @param curve: for area shape.

**/

const data = [

{

name: "Total TCP Connections",

stroke: "#a575b6",

color: "#a575b6",

opacity: 0.2,

curve: "curveMonotoneX",

data: [

{ x: 0, y: 8 },

{ x: 1, y: 9 },

{ x: 2, y: 11 },

{ x: 3, y: 4 },

{ x: 4, y: 5 },

{ x: 5, y: 8 },

{ x: 6, y: 17 },

],

},

{

name: "Total SSL Sessions",

stroke: "#12aada",

color: "#12aada",

opacity: 0.2,

curve: "curveMonotoneX",

data: [

{ x: 0, y: 8 },

{ x: 1, y: 9 },

{ x: 2, y: 11 },

{ x: 3, y: 4 },

{ x: 4, y: 5 },

{ x: 5, y: 8 },

{ x: 6, y: 17 },

],

},

{

name: "Inspected SSL Sessions",

stroke: "#e79a5a",

opacity: 0.2,

color: "#e79a5a",

curve: "curveMonotoneX",

data: [

{ x: 0, y: 8 },

{ x: 1, y: 9 },

{ x: 2, y: 11 },

{ x: 3, y: 4 },

{ x: 4, y: 5 },

{ x: 5, y: 8 },

{ x: 6, y: 17 },

],

},

];

const xyPlot = {

// For stacking

stackBy: "y",

};

function RenderChart() {

return <AreaChart data={data} xyPlot={xyPlot} />;

}

Click here for more variations of area chart.

Props

Note: External props are mostly derived from react-vis & K2. All external props are linked. You can click highlighted props to get more details from official sites.

Property	Type	Required	Default value	Description
data	AreaChartData[]	Yes	None	Data for the AreaChart.
xyPlot	XYPlotProps	no	None	Inherited from "react-vis"
xAxis	boolean | XAxisProps	no	true	Enable or customize XAxis. Inherited from "react-vis".
yAxis	boolean |YAxisProps	no	true	Enable or customize YAxis. Inherited from "react-vis".
verticalGridLines	boolean | VerticalGridLinesProps	no	true	Enable or customize VerticalGridLines. Inherited from "react-vis".
horizontalGridLines	boolean | HorizontalGridLinesProps	no	true	Enable or customize HorizontalGridLines. Inherited from "react-vis".
colors	"light" | "dark" | GradientColor	no	"light"	Colors of visual in different theme modes
title	string | JSX.Element	no	None	Title of the chart.
zone	ZoneProps	no	None	Zones of the AreaChart.
animate	boolean	no	true	Enable the animation.
legends	boolean | LegendsProps	no	true	Enable or customize the legends.
crosshair	boolean | CrosshairProps	no	true	Enable or customize the crosshair.
onClick	(params: { data: AreaChartData }) => void	no	None	Callback for AreaChart click.
style	CSSProperties	no	None	Styles applied to the root element of chart.
className	string	no	None	Class applied to the root element of chart.
classes	Classes API	no	None	Classes API of chart.

AreaChart is wrapped with fetchData HoC, to perform data handling tasks, which adds support for some additional props.

Custom Types

AreaChartData

Property	Type	Required	Default value	Description
name	string	Yes	None	Name of the series.
data	Array<{x: number, y: number, y0?: number}>	Yes	None	Array of data for the series.
color	string | number	no	None	Color for area series.
opacity	number	no	1	Opacity of the area chart from 0 (transparent) to 1 (opaque).

AreaChartData extends AreaSeries from react-vis

ZoneProps

Property	Type	Required	Default value	Description
id	string	Yes	""	Id of zone
domain	number[]	Yes	[0, 0]	Domain of zone, should be start and end value of axis
range	Range	Yes	[]	Array of objects which contains color and ending value of zone
axis	"x" | "y"	Yes	"x"	Direction of zone
legendComponent	JSX.element	No	None	Static legend component for your zone.

Range

type Range = {

color: string | GradientColor,

end: number,

};

CrosshairProps

Property	Type	Required	Default value	Description
xFormatter	(value: number) => string;	no	None	Formatter for thhe xValue of crosshair.
yFormatter	(value: number) => string;	no	None	Formatter for thhe xValue of crosshair.
component	(props: ComponentProps) => JSX.Element;	no	None	Custom Component for crosshair.
style	CSSProperties	no	None	Styles applied to the root element of crosshair.
classes	Crosshair Classes API	no	None	Classes Api of crosshair.
className	string	no	None	Class applied to the root element of crosshair.

CrosshairProps extends crosshair from react-vis

ComponentProps

Property	Type	Required	Default value	Description
data	AreaChartData[]	Yes	None	Data for the AreaChart.
pointData	Array<{x: number, y: number}>	Yes	None	Active x and y points of crosshair position.
activeSeriesData	[key: string]: boolean;	Yes	None	State of active series in legends.

Crosshair Classes

Classes API enables customization and styling of Crosshair elements through their classes.

ClassName	Type	Default value	Description
root	string	None	Applied to root element of crosshair.
xValue	string	None	Applied to xValue of crosshair.
yValue	string	None	Applied to yValue of crosshair.
seriesLabel	string	None	Applied to seriesLabe of crosshair.

Classes

Classes API enables customization and styling of chart elements through their classes.

ClassName	Type	Default value	Description
root	string	None	Applied to root element of chart.
header	string	None	Applied to header of chart.
title	string	None	Applied to title of chart.
legends	string	None	Applied to legends of chart.
chart	string	None	Applied to svg component of chart.
areaSeries	string	None	Applied to areaSeries of chart.
lineSeries	string	None	Applied to lineSeries of chart.
xAxis	string	None	Applied to xAxis of chart.
yAxis	string	None	Applied to yAxis of chart.
xyPlot	string	None	Applied to xyPlot of chart.
crosshair	string	None	Applied to root of crosshair.

Please see Class Specificity for correctly defining it.