1. Components
  2. Area Chart

Components

Area Chart

An area chart displays quantitative data graphically. It is based on the line chart but the area between x-axis and line is emphasized with color.

   

Import AreaChart

Tremor exports one component to create an area chart.

import { AreaChart } from "@tremor/react";

Usage example

The example below shows a composition combining a Card with Title and AreaChart components. Note: For the height, a number value has to be set (e.g, h-72, or h-[500px]. Keep in mind that h-full won't work.)

Newsletter revenue over time (USD)

import { Card, Title, AreaChart } from "@tremor/react";

const chartdata = [
  {
    date: "Jan 22",
    SemiAnalysis: 2890,
    "The Pragmatic Engineer": 2338,
  },
  {
    date: "Feb 22",
    SemiAnalysis: 2756,
    "The Pragmatic Engineer": 2103,
  },
  {
    date: "Mar 22",
    SemiAnalysis: 3322,
    "The Pragmatic Engineer": 2194,
  },
  {
    date: "Apr 22",
    SemiAnalysis: 3470,
    "The Pragmatic Engineer": 2108,
  },
  {
    date: "May 22",
    SemiAnalysis: 3475,
    "The Pragmatic Engineer": 1812,
  },
  {
    date: "Jun 22",
    SemiAnalysis: 3129,
    "The Pragmatic Engineer": 1726,
  },
];

const dataFormatter = (number: number) => {
  return "$ " + Intl.NumberFormat("us").format(number).toString();
};

export default AreaChart = () => (
  <Card>
    <Title>Newsletter revenue over time (USD)</Title>
    <AreaChart
      className="h-72 mt-4"
      data={chartdata}
      index="date"
      categories={["SemiAnalysis", "The Pragmatic Engineer"]}
      colors={["indigo", "cyan"]}
      valueFormatter={dataFormatter}
    />
  </Card>
);

Usage example with click event

The example below shows an interacive chart using the onValueChange prop.

Closed Pull Requests

null
Returned upon onValueChange
import { Card, Title, AreaChart } from "@tremor/react";
import React from "react";

const chartdata2 = [
  {
    date: "Jan 23",
    "2022": 45,
    "2023": 78,
  },
  {
    date: "Feb 23",
    "2022": 52,
    "2023": 71,
  },
  {
    date: "Mar 23",
    "2022": 48,
    "2023": 80,
  },
  {
    date: "Apr 23",
    "2022": 61,
    "2023": 65,
  },
  {
    date: "May 23",
    "2022": 55,
    "2023": 58,
  },
  {
    date: "Jun 23",
    "2022": 67,
    "2023": 62,
  },
  {
    date: "Jul 23",
    "2022": 60,
    "2023": 54,
  },
  {
    date: "Aug 23",
    "2022": 72,
    "2023": 49,
  },
  {
    date: "Sep 23",
    "2022": 65,
    "2023": 52,
  },
  {
    date: "Oct 23",
    "2022": 68,
    "2023": null,
  },
  {
    date: "Nov 23",
    "2022": 74,
    "2023": null,
  },
  {
    date: "Dec 23",
    "2022": 71,
    "2023": null,
  },
];

export const AreaChartInteractiveExample = () => {
  const [value, setValue] = React.useState(null);
  return (
    <>
      <Card>
        <Title>Closed Pull Requests</Title>
        <AreaChart
          className="h-72 mt-4"
          data={chartdata2}
          index="date"
          categories={["2022", "2023"]}
          colors={["neutral", "indigo"]}
          yAxisWidth={30}
          onValueChange={(v) => setValue(v)}
          connectNulls={true}
        />
      </Card>
      <pre>{JSON.stringify(value)}</pre>
    </>
  );
};

Theming

Area Chart

Gridline color
colorstremor-content-subtle
X and Y Axis labels color
colorstremor-content-DEFAULT
X and Y Axis labels size
fontSizetremor-label
Text color legend
colorstremor-content-DEFAULT
Text color legend (hover)
colorstremor-content-emphasis
Font size legend
colorstremor-default
Background color legend (hover)
colorstremor-background-subtle

Chart Tooltip

Border color
colorstremor-border-DEFAULT
Text color head and numbers
colorstremor-content-emphasis
Color ring around bulletpoint
colorstremor-background-DEFAULT
Background color
colorstremor-background-default
Text color label
colorstremor-content-DEFAULT
Shadow
boxShadowtremor-dropdown
Roundness
borderRadiustremor-default
Font size head and numbers
fontSizetremor-default

API Reference: AreaChart

client component

data
Description
The source data, in which each entry is a dictionary.
Type
any[]
Default
Values
categories
Description
Select the categories from your data. Used to populate the legend and toolip.
Type
string[]
Default
Values
E.g. ['Cat1', 'Cat2']
index
Description
Sets the key to map the data to the axis.
Type
string
Default
Values
colorsoptional
Description
Change the default colors. When using Typescript, import the Color type provided by Tremor.
Type
Color[]
Default
Values
E.g. ['blue', 'indigo'].
valueFormatteroptional
Description
Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by Tremor.
Type
ValueFormatter
Default
Values
startEndOnlyoptional
Description
Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.
Type
boolean
Default
false
Values
true, false
showXAxisoptional
Description
Controls the visibility of the X axis.
Type
boolean
Default
true
Values
true, false
showYAxisoptional
Description
Controls the visibility of the Y axis.
Type
boolean
Default
true
Values
true, false
yAxisWidthoptional
Description
Controls width of the vertical axis.
Type
number
Default
56
Values
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
false
Values
true, false
animationDurationoptional
Description
The animation duration in ms.
Type
number
Default
900
Values
showTooltipoptional
Description
Controls the visibility of the tooltip.
Type
boolean
Default
true
Values
true, false
showLegendoptional
Description
Controls the visibility of the legend.
Type
boolean
Default
true
Values
true, false
showGridLinesoptional
Description
Controls the visibility of the gridlines within the plotted area.
Type
boolean
Default
true
Values
true, false
showGradientoptional
Description
Controls the style of the tinted area.
Type
boolean
Default
true
Values
true, false
autoMinValueoptional
Description
Adjusts the minimum value in relation to the magnitude of the data.
Type
boolean
Default
false
Values
true, false
minValueoptional
Description
Sets the minimum value of the shown chart data.
Type
number
Default
Values
maxValueoptional
Description
Sets the maximum value of the shown chart data.
Type
number
Default
Values
stackoptional
Description
Controls the charts behavior to be stacked or placed along each other.
Type
boolean
Default
false
Values
true, false
curveTypeoptional
Description
Controls the type of the chart curve
Type
string
Default
linear
Values
linear, step, monotone
connectNullsoptional
Description
Connects datapoints that have null values between them
Type
boolean
Default
false
Values
true, false
allowDecimalsoptional
Description
Controls if the ticks of a numeric axis are displayed as decimals or not.
Type
boolean
Default
true
Values
true, false
noDataTextoptional
Description
The displayed text when the data is empty.
Type
string
Default
No Data
Values
onValueChangeoptional
Description
Callback function for when the value of the component changes.
Type
(value: T) => void
Default
Values

Need help? You can also ask the community on GitHub Discussions or Slack.