Visualizations
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 } from '@tremor/react';
const chartdata = [ { date: 'Jan 22', SolarPanels: 2890, 'Inverters': 2338, }, { date: 'Feb 22', SolarPanels: 2756, 'Inverters': 2103, }, { date: 'Mar 22', SolarPanels: 3322, 'Inverters': 2194, }, { date: 'Apr 22', SolarPanels: 3470, 'Inverters': 2108, }, { date: 'May 22', SolarPanels: 3475, 'Inverters': 1812, }, { date: 'Jun 22', SolarPanels: 3129, 'Inverters': 1726, }, { date: 'Jul 22', SolarPanels: 3490, 'Inverters': 1982, }, { date: 'Aug 22', SolarPanels: 2903, 'Inverters': 2012, }, { date: 'Sep 22', SolarPanels: 2643, 'Inverters': 2342, }, { date: 'Oct 22', SolarPanels: 2837, 'Inverters': 2473, }, { date: 'Nov 22', SolarPanels: 2954, 'Inverters': 3848, }, { date: 'Dec 22', SolarPanels: 3239, 'Inverters': 3736, },];
const dataFormatter = (number) => `$${Intl.NumberFormat('us').format(number).toString()}`;
export function AreaChartHero() { return ( <AreaChart className="h-80" data={chartdata} index="date" categories={['SolarPanels', 'Inverters']} colors={['indigo', 'rose']} valueFormatter={dataFormatter} yAxisWidth={60} onValueChange={(v) => console.log(v)} /> );}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 an AreaChart with text elements. 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
$34,567
import { AreaChart } from '@tremor/react';
const chartdata = [ { date: 'Jan 22', SolarPanels: 2890, 'Inverters': 2338, }, { date: 'Feb 22', SolarPanels: 2756, 'Inverters': 2103, }, { date: 'Mar 22', SolarPanels: 3322, 'Inverters': 2194, }, { date: 'Apr 22', SolarPanels: 3470, 'Inverters': 2108, }, { date: 'May 22', SolarPanels: 3475, 'Inverters': 1812, }, { date: 'Jun 22', SolarPanels: 3129, 'Inverters': 1726, }, { date: 'Jul 22', SolarPanels: 3490, 'Inverters': 1982, }, { date: 'Aug 22', SolarPanels: 2903, 'Inverters': 2012, }, { date: 'Sep 22', SolarPanels: 2643, 'Inverters': 2342, }, { date: 'Oct 22', SolarPanels: 2837, 'Inverters': 2473, }, { date: 'Nov 22', SolarPanels: 2954, 'Inverters': 3848, }, { date: 'Dec 22', SolarPanels: 3239, 'Inverters': 3736, },];
const valueFormatter = function (number) { return '$ ' + new Intl.NumberFormat('us').format(number).toString();};
export function AreaChartUsageExample() { return ( <> <h3 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Newsletter Revenue</h3> <p className="text-tremor-metric text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">$34,567</p> <AreaChart className="mt-4 h-72" data={chartdata} index="date" yAxisWidth={65} categories={['SolarPanels', 'Inverters']} colors={['indigo', 'cyan']} valueFormatter={valueFormatter} /> </> );}Usage example with click event
The example below shows an interacive chart using the onValueChange prop.
Closed Pull Requests
nullimport { AreaChart, EventProps } from '@tremor/react';import { useState } from 'react';
const chartdata = [ { 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, },];
function AreaChartUsageExampleWithClickEvent() { const [value, setValue] = useState<EventProps>(null); return ( <> <h3 className="text-lg font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong"> Closed Pull Requests </h3> <AreaChart className="mt-4 h-72" data={chartdata} index="date" categories={['2022', '2023']} colors={['blue', 'red']} yAxisWidth={30} onValueChange={(v) => setValue(v)} connectNulls={true} /> <CodeBlock source={JSON.stringify(value, null, 2)} variant="empty" className="mt-8" /> </> );}Usage example with custom tooltip
The example below shows a custom tooltip using customTooltip prop.
Average BPM
import { AreaChart, Card, Title } from '@tremor/react';
const chartdata = [ { date: 'Jan 23', Running: 167, }, { date: 'Feb 23', Running: 125, }, { date: 'Mar 23', Running: 156, }, { date: 'Apr 23', Running: 165, }, { date: 'May 23', Running: 153, }, { date: 'Jun 23', Running: 124, },];
export function AreaChartUsageExampleWithCustomTooltip() { const customTooltip = (props) => { const { payload, active } = props; if (!active || !payload) return null; return ( <div className="w-56 rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown"> {payload.map((category, idx) => ( <div key={idx} className="flex flex-1 space-x-2.5"> <div className={`flex w-1 flex-col bg-${category.color}-500 rounded`} /> <div className="space-y-1"> <p className="text-tremor-content">{category.dataKey}</p> <p className="font-medium text-tremor-content-emphasis"> {category.value} bpm </p> </div> </div> ))} </div> ); }; return ( <> <h3 className="text-lg font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">Average BPM</h3> <AreaChart className="mt-4 h-72" data={chartdata} index="date" categories={['Running']} colors={['blue']} yAxisWidth={30} customTooltip={customTooltip} /> </> );}Usage example with a custom colors
The example below shows a chart with custom colors. Note, that for the custom HEX color to work, the tailwind.config.js has to be adjusted. Learn more about custom colors in your theming section.
// NOTE: The tailwind.config.js has to be extended if you use custom HEX color// ...['[#f0652f]'].flatMap((customColor) => [// `bg-${customColor}`,// `border-${customColor}`,// `hover:bg-${customColor}`,// `hover:border-${customColor}`,// `hover:text-${customColor}`,// `fill-${customColor}`,// `ring-${customColor}`,// `stroke-${customColor}`,// `text-${customColor}`,// `ui-selected:bg-${customColor}]`,// `ui-selected:border-${customColor}]`,// `ui-selected:text-${customColor}`,// ]),
import { AreaChart } from '@tremor/react';
const chartdata = [ { date: 'Jan 23', 'Distance Running': 167, 'Road Cycling': 145, 'Open Water Swimming': 135, 'Hatha Yoga': 115, 'Street Basketball': 150, }, { date: 'Feb 23', 'Distance Running': 125, 'Road Cycling': 110, 'Open Water Swimming': 155, 'Hatha Yoga': 85, 'Street Basketball': 180, }, { date: 'Mar 23', 'Distance Running': 156, 'Road Cycling': 149, 'Open Water Swimming': 145, 'Hatha Yoga': 90, 'Street Basketball': 130, }, { date: 'Apr 23', 'Distance Running': 165, 'Road Cycling': 112, 'Open Water Swimming': 125, 'Hatha Yoga': 105, 'Street Basketball': 170, }, { date: 'May 23', 'Distance Running': 153, 'Road Cycling': 138, 'Open Water Swimming': 165, 'Hatha Yoga': 100, 'Street Basketball': 110, }, { date: 'Jun 23', 'Distance Running': 124, 'Road Cycling': 145, 'Open Water Swimming': 175, 'Hatha Yoga': 75, 'Street Basketball': 140, },];
export function AreaChartUsageExampleCustomColors() { return ( <AreaChart className="h-72" data={chartdata} index="date" categories={[ 'Distance Running', 'Road Cycling', 'Open Water Swimming', ]} colors={['blue-700', 'fuchsia-700', '#f0652f']} yAxisWidth={30} /> );}Usage example with x-axis and y-axis labels
The example below shows added axis labels using xAxisLabel and yAxisLabel prop.
'use client';import { AreaChart } from '@tremor/react';
const chartdata = [ { date: 'Jan 22', SolarPanels: 2890, 'Inverters': 2338, }, { date: 'Feb 22', SolarPanels: 2756, 'Inverters': 2103, }, { date: 'Mar 22', SolarPanels: 3322, 'Inverters': 2194, }, { date: 'Apr 22', SolarPanels: 3470, 'Inverters': 2108, }, { date: 'May 22', SolarPanels: 3475, 'Inverters': 1812, }, { date: 'Jun 22', SolarPanels: 3129, 'Inverters': 1726, }, { date: 'Jul 22', SolarPanels: 3490, 'Inverters': 1982, }, { date: 'Aug 22', SolarPanels: 2903, 'Inverters': 2012, }, { date: 'Sep 22', SolarPanels: 2643, 'Inverters': 2342, }, { date: 'Oct 22', SolarPanels: 2837, 'Inverters': 2473, }, { date: 'Nov 22', SolarPanels: 2954, 'Inverters': 3848, }, { date: 'Dec 22', SolarPanels: 3239, 'Inverters': 3736, },];
const valueFormatter = function (number) { return '$ ' + new Intl.NumberFormat('us').format(number).toString();};
export function AreaChartUsageExampleAxisLabel() { return ( <> <AreaChart className="mt-4 h-72" data={chartdata} index="date" yAxisWidth={65} categories={['SolarPanels', 'Inverters']} colors={['indigo', 'cyan']} valueFormatter={valueFormatter} xAxisLabel="Month of Year" yAxisLabel="Revenue (USD)" /> </> );}API Reference: AreaChart
client component- data
- The source data, in which each entry is a dictionary.
Required
any[]
- categories
- Select the categories from your data. Used to populate the legend and toolip.
Required
string[]
- index
- Sets the key to map the data to the axis.
Required
string
- colors
- Change the default colors. When using Typescript, import the Color type provided by Tremor.
(Color | string)[]
- valueFormatter
- Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by Tremor.
ValueFormatter
- startEndOnly
- Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.
boolean
Default: false
- showXAxis
- Controls the visibility of the X axis.
boolean
Default: true
- showYAxis
- Controls the visibility of the Y axis.
boolean
Default: true
- yAxisWidth
- Controls the width of the vertical axis.
number
Default: 56
- intervalType
- Controls the interval logic of the X axis and how ticks and labels are placed.
intervalType
Default: equidistantPreserveStart
- rotateLabelX
- Rotating the labels of the x-axis.
{ angle: number; verticalShift?: number; xAxisHeight?: number;}
- showAnimation
- Sets an animation to the chart when it is loaded.
boolean
Default: false
- animationDuration
- The animation duration in ms.
number
Default: 900
- showTooltip
- Controls the visibility of the tooltip.
boolean
Default: true
- customTooltip
Override the default tooltip by applying custom styling and data logic. Refer to the examples of custom tooltips above for more info. Within this prop, you have access to:
- active: Indicates whether a tooltip should be displayed for a corresponding data point
- payload: E.g., use payload[0].value for the value, such as "$ 450". Both payload[0].dataKey and payload[0].name for category values, such as "Sales"
- label: For x-axis values, such as "Jan 21"
React.ComponentType
- showLegend
- Controls the visibility of the legend.
boolean
Default: true
- showGridLines
- Controls the visibility of the gridlines within the plotted area.
boolean
Default: true
- showGradient
- Controls the style of the tinted area.
boolean
Default: true
- autoMinValue
- Adjusts the minimum value in relation to the magnitude of the data.
boolean
Default: false
- minValue
- Sets the minimum value of the shown chart data.
number
- maxValue
- Sets the maximum value of the shown chart data.
number
- stack
- Controls the charts behavior to be stacked or placed along each other.
boolean
Default: false
- curveType
- Controls the type of the chart curve
string
Default: linear
- connectNulls
- Connects datapoints that have null values between them
boolean
Default: false
- allowDecimals
- Controls if the ticks of a numeric axis are displayed as decimals or not.
boolean
Default: true
- noDataText
- The displayed text when the data is empty.
string
Default: No Data
- onValueChange
- Callback function for when the value of the component changes.
(value: EventProps) => void
- enableLegendSlider
- Adds a slider functionality to the legend instead of wrapping the legend items.
boolean
Default: false
- tickGap
- Sets the minimum gap between two adjacent labels.
number
Default: 5
- xAxisLabel
- Add a label to the x-axis.
string
- yAxisLabel
- Add a label to the x-axis.
string
- padding
- Add a left and right padding to the chart.
Padding = { left: number; right: number; };
Default: 20
Theming
Area Chart
| Element | Theme Token |
|---|---|
| Gridline color colorstremor-border | colorstremor-border |
| X and Y Axis labels color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| X and Y Axis labels size fontSizetremor-label | fontSizetremor-label |
| x/yAxis Label color colorstremor-content-emphasis | colorstremor-content-emphasis |
| x/yAxis Label size fontSizetremor-DEFAULT | fontSizetremor-DEFAULT |
| Text color legend colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Text color legend (hover) colorstremor-content-emphasis | colorstremor-content-emphasis |
| Font size legend colorstremor-default | colorstremor-default |
| Background color legend (hover) colorstremor-background-subtle | colorstremor-background-subtle |
| Chevron Color Slider colorstext-tremor-content | colorstext-tremor-content |
| Chevron Color Slider (hover) colorstext-tremor-content-emphasis | colorstext-tremor-content-emphasis |
| Chevron Color Slider Background (hover) colorsbg-tremor-background-subtle | colorsbg-tremor-background-subtle |
Chart Tooltip
| Element | Theme Token |
|---|---|
| Border color colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
| Text color head and numbers colorstremor-content-emphasis | colorstremor-content-emphasis |
| Color ring around bulletpoint colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
| Background color colorstremor-background-default | colorstremor-background-default |
| Text color label colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| Shadow boxShadowtremor-dropdown | boxShadowtremor-dropdown |
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Font size head and numbers fontSizetremor-default | fontSizetremor-default |