Area Chart

Displays data in an area chart.
2015201620172018201920202021202203570105140
Biology
Business
Psychology
Properties
stacked
xAxisLabel
yAxisLabel

Installation

Usage

Example
Source Code
"use client";

import React from "react";
import * as SubframeCore from "@subframe/core";
import { AreaChart } from "@/ui/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 Props
Prop
Type
Default value
Notes
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.

20152016201720182019202020212022Year03570105140Enrolled Students
Biology
Business
Psychology

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

2015201620172018201920202021202203570105140
Biology
Business
Psychology

Custom rendered legend

2015201620172018201920202021202203570105140
BiologyBusinessPsychology

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.

2015201620172018201920202021202203570105140
Biology
Business
Psychology