Area Chart - Keep React

An Area Chart is a visual way to show data as a line that turns into a colored shape below it. This shape helps you understand how the data changes over time or categories. It's like coloring under a line graph to see where the data is bigger or smaller. People use Area Charts to see trends, compare things, and notice patterns in data. The colored area makes it clear which parts are higher or lower in value.

Default Area Chart#

The AreaChart component is used to render an area chart based on the "price" data. This creates a visual representation of how the "price" values change over the "name" categories.

Area Chart With Double Series#

The AreaChart component now uses both "price" and "sell" data for the two series. This creates a chart that shows how both "price" and "sell" values change over the "name" categories, providing insights into both series simultaneously.

Area Chart With GridLine and GraphLine#

The showGridLine, showXAxis, and showYAxis props to the AreaChart component props enable grid lines and axis lines, making the chart more organized and easier to interpret.

Natural type Area Chart#

The chartType prop is set to "natural" for the AreaChart component. This chart type emphasizes smooth curves in the lines, giving the chart a more organic and visually appealing appearance.

API Reference#

Explore the available props for the Area Chart component

Property	Description	Type	Default
showTooltip	Determines whether tooltips are displayed on data points.	boolean	false
showGridLine	Specifies whether grid lines are displayed in the chart.	boolean	false
chartType	Specifies the type of curve used for the area chart.	natural linear	linear
showXAxis	Determines whether the X-axis is displayed.	boolean	false
showYAxis	Determines whether the Y-axis is displayed.	boolean	false
dataKey	Key for the main data series in the chart.	string	price
secondaryDataKey	Key for a secondary data series in the chart.	string	sell
XAxisDataKey	Key for X-axis data in the chart data array.	string	None
YAxisDataKey	Key for Y-axis data in the chart data array.	string	None
chartData	Array of data points used to populate the chart.	Array	Array
chartColor	Color for the main chart.	string	#1B4DFF
secondaryChartColor	Color for the secondary chart	string	#1B4DFF
areaStoke	Color for the area stroke of the chart.	string	#1B4DFF
secondaryAreaStoke	Color for the secondary area stroke	string	#94ABFF
tooltipBtnStyle	Custom style of the tooltip.	string	None

Reference#

To learn more about the area chart, please see the documentation of Recharts