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
Element | Theme Token |
---|---|
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
Element | Theme Token |
---|---|
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.