Visualizations

Scatter Chart

A scatter chart visualizes relationships between two or three variables.

Import ScatterChart

Tremor exports one component to create a scatter chart.

import { ScatterChart } from '@tremor/react';

Usage example

The example below shows a chart composition combining a Card and text elements. Note: For the height, a number value has to be set (e.g. h-72. Keep in mind that h-full won't work.)

Life expectancy vs. GDP per capita

As of 2015. Source: Our World in Data

Usage example with click event

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

Life expectancy vs. GDP per capita

As of 2015. Source: Our World in Data

null

Usage example with custom tooltip

The example below shows a custom tooltip using customTooltip prop.

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.

API Reference: ScatterChart

client component
data
Required
any[]
The source data, in which each entry is a dictionary.
x
Required
String
Select the series to populate the x axis.
y
Required
String
Select the series to populate the y axis.
category
Required
string
Used to assign different values for coloring data points according to your data.
size
string
Select the series to set bubble size representing a third data dimension.
sizeRange
number[]
Set the range of the size.
colors
(Color | string)[]
Change the default colors. When using Typescript, import the Color type provided by Tremor.
valueFormatter
ScatterChartValueFormatter
Controls the text formatting for the x, y, and z values. When using Typescript, import the ScatterChartValueFormatter type provided by Tremor.
showOpacity
boolean
Add an opacity to the data points. Helpful when lot's of them overlap
startEndOnly
boolean
Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.
showXAxis
boolean
Controls the visibility of the X axis.
showYAxis
boolean
Controls the visibility of the Y axis.
yAxisWidth
number
Controls width of the vertical axis.
intervalType
intervalType
Controls the interval logic of the X axis and how ticks and labels are placed.
rotateLabelX
{ angle: number; verticalShift?: number; xAxisHeight?: number;}
Rotating the labels of the x-axis.
showAnimation
boolean
Sets an animation to the chart when it is loaded.
animationDuration
number
The animation duration in ms.
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"
showLegend
boolean
Controls the visibility of the legend.
showGridLines
boolean
Controls the visibility of the gridlines within the plotted area.
autoMinXValue
boolean
Adjusts the minimum value in relation to the magnitude of the data for the X axis.
minXValue
number
Sets the minimum value of the shown chart data for the X axis.
maxXValue
number
Sets the maximum value of the shown chart data for the X axis.
autoMinYValue
boolean
Adjusts the minimum value in relation to the magnitude of the data for the Y axis.
minYValue
number
Sets the minimum value of the shown chart data for the Y axis.
maxYValue
number
Sets the maximum value of the shown chart data for the Y axis.
connectNulls
boolean
Connects datapoints that have null values between them
allowDecimals
boolean
Controls if the ticks of a numeric axis are displayed as decimals or not.
noDataText
string
The displayed text when the data is empty.
onValueChange
(value: EventProps) => void
Callback function for when the value of the component changes.
enableLegendSlider
boolean
Adds a slider functionality to the legend instead of wrapping the legend items.
tickGap
number
Sets the minimum gap between two adjacent labels.

Theming

Scatter Chart

Gridline color
colorstremor-border
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
Chevron Color Slider
colorstext-tremor-content
Chevron Color Slider (hover)
colorstext-tremor-content-emphasis
Chevron Color Slider Background (hover)
colorsbg-tremor-background-subtle

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