Area Chart

Displays data in an area chart.
Properties
stacked
xAxisLabel
yAxisLabel
Example
Source Code
Installation
"use client";

import React from "react";
import * as SubframeCore from "@subframe/core";
import { AreaChart } from "@/subframe/components/AreaChart";

function AreaChartExample() {
  return (
    <AreaChart
      stacked={false}
      categories={["Biology", "Business", "Psychology"]}
      data={[
        { Year: "2015", Psychology: 120, Business: 110, Biology: 100 },
        { Year: "2016", Psychology: 130, Business: 95, Biology: 105 },
        { Year: "2017", Psychology: 115, Business: 105, Biology: 110 },
        { Year: "2018", Psychology: 125, Business: 120, Biology: 90 },
        { Year: "2019", Psychology: 110, Business: 130, Biology: 85 },
        { Year: "2020", Psychology: 135, Business: 100, Biology: 95 },
        { Year: "2021", Psychology: 105, Business: 115, Biology: 120 },
        { Year: "2022", Psychology: 140, Business: 125, Biology: 130 },
      ]}
      index={"Year"}
    />
  );
}

export default AreaChartExample;

Props

Area Chart
Prop
Type
Default
Additional info
stacked
boolean
false

Examples

Axis Labels

Use xAxis and yAxis slots for greater axis customization. The SubframeCore.XAxis and SubframeCore.YAxis components can receive any of the props from the Recharts XAxis and Recharts YAxis components.

Customizing the Legend

Use the legend slot to render a custom legend. The SubframeCore.ChartLegend can receive any of the props from the Recharts Legend component.

Legend on bottom left

Custom rendered legend

Custom Tooltip

Use the tooltip slot to render a custom tooltip. The SubframeCore.ChartTooltip can receive any of the props from the Recharts Tooltip component.