Area Chart

The AreaChart component is used to visualize data in an area chart format. It is a wrapper around the Recharts AreaChart component.

Usage

import { AreaChart } from "@sparrowengg/twigs-charts";

const Chart = () => {
  return (
    <AreaChart
      data={[
        {
          name: "Page A",
          UV: 4000,
          PV: 2400,
          AMT: 2400,
        },
        {
          name: "Page B",
          UV: 3000,
          PV: 1398,
          AMT: 2210,
        },
        {
          name: "Page C",
          UV: 2000,
          PV: 9800,
          AMT: 2290,
        },
      ]}
      dataKey="name"
      series={[
        {
          name: "UV",
          color: "#51D3D9",
        },
        {
          name: "PV",
          color: "#FEA58E",
        },
        {
          name: "AMT",
          color: "#BDA9EA",
        },
      ]}
    />
  );
};

The series object determines the order of the area in the chart. The first item in the array will be the first area, the second item will be the second area, and so on. Additional properties like color, label, yAxisId, fill, stroke, unit, stackId, valueFormatter are optional and can be used to customize the areas.

Props

Examples

Multi data

Gradient

Solid fill color can be replaced with a gradient by setting gradient to true.

With Legend

Legend is a useful way to add labels to the areas. You can set showLegend to true to enable this.

Stacked

Stacked charts are useful when you want to compare multiple data points within a single area. You can set type="stacked" to enable this.

Curve Type

Curve type can be set by setting curveType to the series object. It accepts the following values:

• basis
• basisClosed
• basisOpen
• bumpX
• bumpY
• bump
• linear
• linearClosed
• natural
• monotoneX
• monotoneY
• monotone
• step
• stepBefore
• stepAfter

Two Y Axis with valueFormatter

Two Y-axis are useful when you want to compare two different data points within a single area. You can set showRightYAxis to true to enable this. Additionally yAxisId should be added to the series object, accepted values are left and right. valueFormatter can be used to format the values.

Custom Dots

Custom dots can be added to the chart by using areaDotProps or areaActiveDotProps props. areaActiveDotProps is used to add a custom dot to the hovered area.

In the above example, area dots are removed by setting areaDotProps to false. A custom dot is added to the hovered area by setting areaActiveDotProps to a function that returns a styled circle.

Area and Axis Labels

Area and axis labels can be added to the chart by using showAreaLabel and xAxisLabel and yAxisLabel props. showAreaLabel is used to show the area label. xAxisLabel and yAxisLabel are used to add labels to the x and y axes respectively.

Custom Labels and Units

Custom labels and units can be added to the chart by using label and unit props. label is used to add a custom label to the area. unit is used to add a unit to the area.