Visualizations
Funnel Chart
A funnel chart illustrates the progression or conversion rates through successive stages of a process.
'use client';
import { FunnelChart } from '@tremor/react';
const chartdata = [ { name: 'opens', value: 200 }, { name: 'visitors', value: 351 }, { name: "added to cart", value: 191, }, { name: 'orders', value: 10 },];
export function FunnelChartHero() { return <FunnelChart className="h-80" data={chartdata} onValueChange={(v) => console.log(v)} />;}Import FunnelChart
Tremor exports one component to create an funnel chart.
import { FunnelChart } from '@tremor/react';
Usage example
The example below shows a composition combining an FunnelChart with text elements. Note: For the height, a number value has to be set (e.g, h-72, or h-[500px]).
Overall conversion
5.6%
Uniques in specific order, who converted within 30 days.
'use client';
import { FunnelChart } from '@tremor/react';
const chartdata = [ { name: '1. Add credit Card', value: 89 }, { name: '2. Copy invite code', value: 6 }, { name: '3. Send invite code', value: 5, },];
export function FunnelChartUsageExample() { return ( <> <h3 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content"> Overall conversion </h3> <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> 5.6% </p> <p className="mt-4 text-tremor-label text-tremor-content dark:text-dark-tremor-content"> Uniques in specific order, who converted within 30 days. </p> <FunnelChart className="mt-4 h-60" data={chartdata} /> </> );}Usage example with evolution gradient
By setting evolutionGradient to true, you can add a different styling to the gaps.
'use client';
import { FunnelChart } from '@tremor/react';
const chartdata = [ { name: '1. Add credit Card', value: 89 }, { name: '2. Copy invite code', value: 6 }, { name: '3. Send invite code', value: 5, },];
export function FunnelChartEvolutionExample() { return ( <FunnelChart evolutionGradient gradient={false} className="h-60" data={chartdata} /> );}Usage example with evolution gradient
The calculateFrom prop controls the referenced value to calculate the drop-off between steps. Here we set it to previous, to always reference the preceding bar as the calculation base. We also set showArrow to false.
'use client';
import { FunnelChart } from '@tremor/react';
const chartdata = [ { name: 'Session start', value: 31943 }, { name: 'Account Created', value: 10474 }, { name: 'Item Detail Page', value: 9482, }, { name: 'Added to cart', value: 4684, }, { name: 'Complete Purchase', value: 1283, },];
export function FunnelChartFromPreviousAndNoArrowExample() { return ( <FunnelChart showArrow={false} calculateFrom="previous" className="h-60" data={chartdata} /> );}Usage example with click event
The example below shows an interacive chart using the onValueChange prop.
Click on a bar'use client';
import { EventProps, FunnelChart } from '@tremor/react';import React from 'react';
const chartdata = [ { name: 'visitors', value: 351 }, { name: 'added to cart', value: 191, }, { name: 'orders', value: 10 },];
export function FunnelChartWithClickEventExample() { const [value, setValue] = React.useState<EventProps>(null); return ( <> <FunnelChart onValueChange={(v) => setValue(v)} className="h-60" data={chartdata} /> <CodeBlock source={value ? JSON.stringify(value, null, 2) : 'Click on a bar'} variant="empty" className="mt-8" /> </> );}Usage example with x-axis and y-axis labels
The example below shows added axis labels using xAxisLabel and yAxisLabel prop.
'use client';
import { FunnelChart } from '@tremor/react';
const chartdata = [ { name: 'visitors', value: 230 }, { name: 'added to cart', value: 83, }, { name: 'orders', value: 4 },];
export function FunnelChartUsageExampleAxisLabel() { return ( <FunnelChart className="h-80" data={chartdata} onValueChange={(v) => console.log(v)} xAxisLabel="Flow" yAxisLabel="Conversion" /> );}API Reference: FunnelChart
client component- data
- The source data, in which each entry is a dictionary.
Required
Data[] = { value: number, name: string}
- calculateFrom
- Select the calculation reference for the percentage drop-off.
"first" | "previous"
Default: "first"
- evolutionGradient
- Set a gradient to connect the bars visually.
boolean
Default: false
- gradient
- Set toggle the gradient from the bars.
boolean
Default: true
- 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
- variant
- Select a funnel variant: base or center.
FunnelVariantType
Default: center
- showXAxis
- Controls the visibility of the X axis.
boolean
Default: true
- showYAxis
- Controls the visibility of the Y axis.
boolean
Default: true
- yAxisPadding?: number;
- Controls the padding of the vertical axis.
number
- rotateLabelX
- Rotating the labels of the x-axis.
{ angle: number; verticalShift?: number; xAxisHeight?: number;}
- showArrow
- Control the visibility of the arrow between the bars.
boolean
Default: true
- 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
- showGridLines
- Controls the visibility of the gridlines within the plotted area.
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
- barGap
- The gap between bars, which can be a percent value or a fixed value.
Percentage | number
Default: "20%
- xAxisLabel
- Add a label to the x-axis.
string
- yAxisLabel
- Add a label to the x-axis.
string
Theming
Funnel Chart
| Element | Theme Token |
|---|---|
| Gridline color colorstremor-border | colorstremor-border |
| X and Y Axis labels color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |
| x/yAxis Label color colorstremor-content-emphasis | colorstremor-content-emphasis |
| x/yAxis Label size fontSizetremor-DEFAULT | fontSizetremor-DEFAULT |
| X and Y Axis labels size fontSizetremor-label | fontSizetremor-label |
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 |