Visualizations

Funnel Chart

A funnel chart illustrates the progression or conversion rates through successive stages of a process.

100%75%50%25%0%

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.

100%75%50%25%0%

Usage example with evolution gradient

By setting evolutionGradient to true, you can add a different styling to the gaps.

100%75%50%25%0%

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.

100%75%50%25%0%

Usage example with click event

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

100%75%50%25%0%
Click on a bar

Usage example with x-axis and y-axis labels

The example below shows added axis labels using xAxisLabel and yAxisLabel prop.

100%75%50%25%0%FlowConversion

API Reference: FunnelChart

client component
data
Required
Data[] = { value: number, name: string}
The source data, in which each entry is a dictionary.
calculateFrom
"first" | "previous"
Select the calculation reference for the percentage drop-off.
evolutionGradient
boolean
Set a gradient to connect the bars visually.
gradient
boolean
Set toggle the gradient from the bars.
colors
(Color | string)[]
Change the default colors. When using Typescript, import the Color type provided by Tremor.
valueFormatter
ValueFormatter
Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by Tremor.
variant
FunnelVariantType
Select a funnel variant: base or center.
showXAxis
boolean
Controls the visibility of the X axis.
showYAxis
boolean
Controls the visibility of the Y axis.
yAxisPadding?: number;
number
Controls the padding of the vertical axis.
rotateLabelX
{ angle: number; verticalShift?: number; xAxisHeight?: number;}
Rotating the labels of the x-axis.
showArrow
boolean
Control the visibility of the arrow between the bars.
showTooltip
boolean
Controls the visibility of the tooltip.
customTooltip
React.ComponentType

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"
showGridLines
boolean
Controls the visibility of the gridlines within the plotted area.
noDataText
string
The displayed text when the data is empty.
onValueChange
(value: EventProps) => void
Callback function for when the value of the component changes.
barGap
Percentage | number
The gap between bars, which can be a percent value or a fixed value.
xAxisLabel
string
Add a label to the x-axis.
yAxisLabel
string
Add a label to the x-axis.

Theming

Funnel Chart

Gridline color
colorstremor-border
X and Y Axis labels color
colorstremor-content-DEFAULT
x/yAxis Label color
colorstremor-content-emphasis
x/yAxis Label size
fontSizetremor-DEFAULT
X and Y Axis labels size
fontSizetremor-label

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