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";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <AreaChart
    data={[{}]}
    categories={[]}
    dataKey=""
    stack={false}
    colors={["blue"]}
    valueFormatter={undefined}
    startEndOnly={false}
    showXAxis={true}
    showYAxis={true}
    autoMinValue={false}
    yAxisWidth="w-14"
    showTooltip={true}
    showLegend={true}
    showGridLines={true}
    showAnimation={true}
    height="h-80"
    marginTop="mt-0"
  />
);

Usage example

The example below shows a a chart composition combining a Card with Title and AreaChart components.

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 () => (
  <Card>
    <Title>Newsletter revenue over time (USD)</Title>
    <AreaChart
      data={chartdata}
      categories={["SemiAnalysis", "The Pragmatic Engineer"]}
      dataKey="date"
      height="h-72"
      colors={["indigo", "cyan"]}
      valueFormatter={dataFormatter}
      marginTop="mt-4"
    />
  </Card>
);

API Reference: AreaChart

data
Description
The source data, in which each entry is a dictionary.
Type
Object
Default
-
Values
categoriesoptional
Description
Select the categories from your data. Used to populate the legend and toolip.
Type
array
Default
-
Values
E.g. ['Cat1', 'Cat2']
dataKeyoptional
Description
Sets the key to map the data to the axis.
Type
string
Default
Values
stackoptional
Description
Controls the charts behavior to be stacked or placed along each other.
Type
boolean
Default
false
Values
true, false
colorsoptional
Description
Change the default colors.
Type
array
Default
-
Values
E.g. ['blue', 'indigo']
valueFormatteroptional
Description
Controls the text formatting for the y-axis values.
Type
function
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 horizontal axis.
Type
boolean
Default
true
Values
true, false
showYAxisoptional
Description
Controls the visibility of the horizontal axis.
Type
boolean
Default
true
Values
true, false
autoMinValueoptional
Description
Adjusts the minimum value in relation to the magnitude of the data.
Type
boolean
Default
true
Values
true, false
yAxisWidthoptional
Description
Controls width of the vertical axis.
Type
number
Default
-
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
showAnimationoptional
Description
Sets an animation to the chart when it is loaded.
Type
boolean
Default
true
Values
true, false
heightoptional
Description
Defines height of the chart container.
Type
string
Default
h-80
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0