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.

Table of Contents#

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

PropertyDescriptionTypeDefault
showTooltipDetermines whether tooltips are displayed on data points.booleanfalse
showGridLineSpecifies whether grid lines are displayed in the chart.booleanfalse
chartTypeSpecifies the type of curve used for the area chart.
natural
linear
linear
showXaxisDetermines whether the X-axis is displayed.booleanfalse
showYaxisDetermines whether the Y-axis is displayed.booleanfalse
dataKeyKey for the main data series in the chart.stringprice
secondaryDataKeyKey for a secondary data series in the chart.stringsell
XAxisDataKeyKey for X-axis data in the chart data array.stringNone
YAxisDataKeyKey for Y-axis data in the chart data array.stringNone
chartDataArray of data points used to populate the chart.ArrayArray
chartColorColor for the main chart.string#1B4DFF
secondaryChartColorColor for the secondary chartstring#1B4DFF
areaStokeColor for the area stroke of the chart.string#1B4DFF
secondaryAreaStokeColor for the secondary area strokestring#94ABFF
tooltipBtnVariantVariant of the tooltip button.
primary
dashed
text
linkPrimary
linkGray
outlineGray
outlinePrimary
default
default
tooltipBtnStyleCustom style of the tooltip.stringNone

Reference#

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