Visualizations

Scatter Chart

A scatter chart visualizes relationships between two or three variables.

import { ScatterChart } from '@tremor/react';
const chartdata = [  {    Country: 'Argentina',    'Life expectancy': 76.3,    GDP: 13467.1236,    Population: 43417765,  },  {    Country: 'Australia',    'Life expectancy': 82.8,    GDP: 56554.3876,    Population: 23789338,  },  {    Country: 'Austria',    'Life expectancy': 81.5,    GDP: 43665.947,    Population: 8633169,  },  {    Country: 'Brazil',    'Life expectancy': 75,    GDP: 8757.2622,    Population: 2596218,  },  {    Country: 'Estonia',    'Life expectancy': 77.6,    GDP: 1774.9291,    Population: 131547,  },  {    Country: 'Ethiopia',    'Life expectancy': 64.8,    GDP: 645.4637627,    Population: 9987333,  },  {    Country: 'Germany',    'Life expectancy': 81,    GDP: 41176.88158,    Population: 81686611,  },  {    Country: 'Honduras',    'Life expectancy': 74.6,    GDP: 2326.15856,    Population: 896829,  },  {    Country: 'Italy',    'Life expectancy': 82.7,    GDP: 349.14755,    Population: 673582,  },  {    Country: 'Lithuania',    'Life expectancy': 73.6,    GDP: 14252.42853,    Population: 29491,  },  {    Country: 'Mexico',    'Life expectancy': 76.7,    GDP: 9143.128494,    Population: 12589949,  },  {    Country: 'Norway',    'Life expectancy': 81.8,    GDP: 7455.24654,    Population: 518867,  },  {    Country: 'Philippines',    'Life expectancy': 68.5,    GDP: 2878.33837,    Population: 11716359,  },  {    Country: 'Samoa',    'Life expectancy': 74,    GDP: 4149.363444,    Population: 193759,  },  {    Country: 'Sao Tome and Principe',    'Life expectancy': 67.5,    GDP: 1624.63963,    Population: 195553,  },  {    Country: 'Senegal',    'Life expectancy': 66.7,    GDP: 98.7256145,    Population: 14976994,  },  {    Country: 'Switzerland',    'Life expectancy': 83.4,    GDP: 89899.8424,    Population: 8282396,  },  {    Country: 'Tajikistan',    'Life expectancy': 69.7,    GDP: 918.6771543,    Population: 8548651,  },  {    Country: 'Ukraine',    'Life expectancy': 71.3,    GDP: 2124.662666,    Population: 4515429,  },  {    Country: 'Uruguay',    'Life expectancy': 77,    GDP: 15524.84247,    Population: 3431552,  },  {    Country: 'Zimbabwe',    'Life expectancy': 67,    GDP: 118.69383,    Population: 15777451,  },];
export const ScatterChartHero = () => (  <ScatterChart    className="h-80"    data={chartdata}    category="Country"    x="GDP"    y="Life expectancy"    size="Population"    showOpacity={true}    minYValue={60}    valueFormatter={{      x: (amount) => `$${(amount / 1000).toFixed(1)}K`,      y: (lifeExp) => `${lifeExp} yrs`,      size: (population) => `${(population / 1000000).toFixed(1)}M people`,    }}    showLegend={false}    onValueChange={(v) => console.log(v)}  />);

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

import { Card, ScatterChart } from '@tremor/react';
const chartdata = [  {    Country: 'Argentina',    'Life expectancy': 76.3,    GDP: 13467.1236,    Population: 43417765,  },  {    Country: 'Australia',    'Life expectancy': 82.8,    GDP: 56554.3876,    Population: 23789338,  },  {    Country: 'Austria',    'Life expectancy': 81.5,    GDP: 43665.947,    Population: 8633169,  },  {    Country: 'Brazil',    'Life expectancy': 75,    GDP: 8757.2622,    Population: 2596218,  },  {    Country: 'Estonia',    'Life expectancy': 77.6,    GDP: 1774.9291,    Population: 131547,  },  {    Country: 'Ethiopia',    'Life expectancy': 64.8,    GDP: 645.4637627,    Population: 9987333,  },  {    Country: 'Germany',    'Life expectancy': 81,    GDP: 41176.88158,    Population: 81686611,  },  {    Country: 'Honduras',    'Life expectancy': 74.6,    GDP: 2326.15856,    Population: 896829,  },  {    Country: 'Italy',    'Life expectancy': 82.7,    GDP: 349.14755,    Population: 673582,  },  {    Country: 'Lithuania',    'Life expectancy': 73.6,    GDP: 14252.42853,    Population: 29491,  },  {    Country: 'Mexico',    'Life expectancy': 76.7,    GDP: 9143.128494,    Population: 12589949,  },  {    Country: 'Norway',    'Life expectancy': 81.8,    GDP: 7455.24654,    Population: 518867,  },  {    Country: 'Philippines',    'Life expectancy': 68.5,    GDP: 2878.33837,    Population: 11716359,  },  {    Country: 'Samoa',    'Life expectancy': 74,    GDP: 4149.363444,    Population: 193759,  },  {    Country: 'Sao Tome and Principe',    'Life expectancy': 67.5,    GDP: 1624.63963,    Population: 195553,  },  {    Country: 'Senegal',    'Life expectancy': 66.7,    GDP: 98.7256145,    Population: 14976994,  },  {    Country: 'Switzerland',    'Life expectancy': 83.4,    GDP: 89899.8424,    Population: 8282396,  },  {    Country: 'Tajikistan',    'Life expectancy': 69.7,    GDP: 918.6771543,    Population: 8548651,  },  {    Country: 'Ukraine',    'Life expectancy': 71.3,    GDP: 2124.662666,    Population: 4515429,  },  {    Country: 'Uruguay',    'Life expectancy': 77,    GDP: 15524.84247,    Population: 3431552,  },  {    Country: 'Zimbabwe',    'Life expectancy': 67,    GDP: 118.69383,    Population: 15777451,  },];
export function ScatterChartUsageExample() {  return (    <Card>      <p className="text-lg text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">Life expectancy vs. GDP per capita</p>      <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content leading-6">As of 2015. Source: Our World in Data </p>      <ScatterChart        className="-ml-2 mt-6 h-80"        yAxisWidth={50}        data={chartdata}        category="Country"        x="GDP"        y="Life expectancy"        size="Population"        showOpacity={true}        minYValue={60}        valueFormatter={{          x: (amount) => `$${(amount / 1000).toFixed(1)}K`,          y: (lifeExp) => `${lifeExp} yrs`,          size: (population) => `${(population / 1000000).toFixed(1)}M people`,        }}        enableLegendSlider      />    </Card>  );}

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

import { EventProps, ScatterChart } from '@tremor/react';import React from 'react';
const chartdata = [  {    Country: 'Argentina',    'Life expectancy': 76.3,    GDP: 13467.1236,    Population: 43417765,  },  {    Country: 'Australia',    'Life expectancy': 82.8,    GDP: 56554.3876,    Population: 23789338,  },  {    Country: 'Austria',    'Life expectancy': 81.5,    GDP: 43665.947,    Population: 8633169,  },  {    Country: 'Brazil',    'Life expectancy': 75,    GDP: 8757.2622,    Population: 2596218,  },  {    Country: 'Estonia',    'Life expectancy': 77.6,    GDP: 1774.9291,    Population: 131547,  },  {    Country: 'Ethiopia',    'Life expectancy': 64.8,    GDP: 645.4637627,    Population: 9987333,  },  {    Country: 'Germany',    'Life expectancy': 81,    GDP: 41176.88158,    Population: 81686611,  },  {    Country: 'Honduras',    'Life expectancy': 74.6,    GDP: 2326.15856,    Population: 896829,  },  {    Country: 'Italy',    'Life expectancy': 82.7,    GDP: 349.14755,    Population: 673582,  },  {    Country: 'Lithuania',    'Life expectancy': 73.6,    GDP: 14252.42853,    Population: 29491,  },  {    Country: 'Mexico',    'Life expectancy': 76.7,    GDP: 9143.128494,    Population: 12589949,  },  {    Country: 'Norway',    'Life expectancy': 81.8,    GDP: 7455.24654,    Population: 518867,  },  {    Country: 'Philippines',    'Life expectancy': 68.5,    GDP: 2878.33837,    Population: 11716359,  },  {    Country: 'Samoa',    'Life expectancy': 74,    GDP: 4149.363444,    Population: 193759,  },  {    Country: 'Sao Tome and Principe',    'Life expectancy': 67.5,    GDP: 1624.63963,    Population: 195553,  },  {    Country: 'Senegal',    'Life expectancy': 66.7,    GDP: 98.7256145,    Population: 14976994,  },  {    Country: 'Switzerland',    'Life expectancy': 83.4,    GDP: 89899.8424,    Population: 8282396,  },  {    Country: 'Tajikistan',    'Life expectancy': 69.7,    GDP: 918.6771543,    Population: 8548651,  },  {    Country: 'Ukraine',    'Life expectancy': 71.3,    GDP: 2124.662666,    Population: 4515429,  },  {    Country: 'Uruguay',    'Life expectancy': 77,    GDP: 15524.84247,    Population: 3431552,  },  {    Country: 'Zimbabwe',    'Life expectancy': 67,    GDP: 118.69383,    Population: 15777451,  },];
export function ScatterChartUsageExampleWithClickEvent() {  const [value, setValue] = React.useState<EventProps>(null);  return (    <>      <Card>        <p className="text-lg text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">Life expectancy vs. GDP per capita</p>        <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content leading-6">As of 2015. Source: Our World in Data </p>        <ScatterChart          className="-ml-2 mt-6 h-80"          yAxisWidth={50}          data={chartdata}          category="Country"          x="GDP"          y="Life expectancy"          size="Population"          showOpacity={true}          minYValue={60}          showLegend={false}          valueFormatter={{            x: (amount) => `$${(amount / 1000).toFixed(1)}K`,            y: (lifeExp) => `${lifeExp} yrs`,            size: (population) =>              `${(population / 1000000).toFixed(1)}M people`,          }}          onValueChange={(v) => setValue(v)}        />      </Card>      <CodeBlock source={JSON.stringify(value, null, 2)} variant="empty" className="mt-8" />    </>  );}

The example below shows a custom tooltip using customTooltip prop.

import { Card, ScatterChart } from '@tremor/react';
const chartdata = [  {    location: 'Location A',    x: 100,    y: 200,    z: 200,  },  {    location: 'Location A',    x: 120,    y: 100,    z: 260,  },  {    location: 'Location A',    x: 170,    y: 300,    z: 400,  },  {    location: 'Location B',    x: 140,    y: 250,    z: 280,  },  {    location: 'Location B',    x: 150,    y: 400,    z: 500,  },  {    location: 'Location B',    x: 110,    y: 280,    z: 200,  },  {    location: 'Location C',    x: 200,    y: 260,    z: 240,  },  {    location: 'Location C',    x: 220,    y: 290,    z: 120,  },  {    location: 'Location D',    x: 0,    y: 190,    z: 250,  },  {    location: 'Location D',    x: 70,    y: 0,    z: 950,  },];
export function ScatterChartUsageExampleWithCustomTooltip() {  type CustomTooltipTypeScatter = {    payload: any;    active: boolean | undefined;    label: any;  };
  const customTooltip = (props: CustomTooltipTypeScatter) => {    const { payload, active, label } = props;    if (!active || !payload) return null;    return (      <div className="w-48 rounded-tremor-default border border-tremor-border bg-tremor-background p-2 text-tremor-default shadow-tremor-dropdown">        <div className="flex flex-1 space-x-2.5">          <div            className={`flex w-1.5 flex-col bg-${payload[0]?.color}-500 rounded`}          />          <div className="w-full">            <p className="mb-2 font-medium text-tremor-content-emphasis">              {label}            </p>            {payload.map((payloadItem: any, index: number) => (              <div                key={index}                className="flex items-center justify-between space-x-6"              >                <span className="text-tremor-content">{payloadItem.name}</span>                <span className="font-medium tabular-nums text-tremor-content-emphasis">                  {payloadItem.value}                </span>              </div>            ))}          </div>        </div>      </div>    );  };  return (    <>      <ScatterChart        className="-ml-2 mt-6 h-80"        yAxisWidth={50}        data={chartdata}        category="location"        x="x"        y="y"        size="z"        showLegend={false}        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 { ScatterChart } from '@tremor/react';
const chartdata = [  {    location: 'Location A',    x: 100,    y: 200,    z: 200,  },  {    location: 'Location A',    x: 120,    y: 100,    z: 260,  },  {    location: 'Location A',    x: 170,    y: 300,    z: 400,  },  {    location: 'Location B',    x: 140,    y: 250,    z: 280,  },  {    location: 'Location B',    x: 150,    y: 400,    z: 500,  },  {    location: 'Location B',    x: 110,    y: 280,    z: 200,  },  {    location: 'Location C',    x: 200,    y: 260,    z: 240,  },  {    location: 'Location C',    x: 220,    y: 290,    z: 120,  },  {    location: 'Location D',    x: 0,    y: 190,    z: 250,  },  {    location: 'Location D',    x: 70,    y: 0,    z: 950,  },];
export function ScatterChartUsageExampleWithCustomColors() {  return (    <>      <ScatterChart        className="-ml-2 mt-6 h-80"        colors={['blue-800', 'blue-700', 'blue-600', '#f0652f']}        yAxisWidth={50}        data={chartdata}        category="location"        x="x"        y="y"        size="z"        showLegend={false}      />    </>  );}

Usage example with x-axis and y-axis labels

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

Life expectancy vs. GDP per capita

As of 2015. Source: Our World in Data

import { Card, ScatterChart } from '@tremor/react';
const chartdata = [  {    Country: 'Argentina',    'Life expectancy': 76.3,    GDP: 13467.1236,    Population: 43417765,  },  {    Country: 'Australia',    'Life expectancy': 82.8,    GDP: 56554.3876,    Population: 23789338,  },  {    Country: 'Austria',    'Life expectancy': 81.5,    GDP: 43665.947,    Population: 8633169,  },  {    Country: 'Brazil',    'Life expectancy': 75,    GDP: 8757.2622,    Population: 2596218,  },  {    Country: 'Estonia',    'Life expectancy': 77.6,    GDP: 1774.9291,    Population: 131547,  },  {    Country: 'Ethiopia',    'Life expectancy': 64.8,    GDP: 645.4637627,    Population: 9987333,  },  {    Country: 'Germany',    'Life expectancy': 81,    GDP: 41176.88158,    Population: 81686611,  },  {    Country: 'Honduras',    'Life expectancy': 74.6,    GDP: 2326.15856,    Population: 896829,  },  {    Country: 'Italy',    'Life expectancy': 82.7,    GDP: 349.14755,    Population: 673582,  },  {    Country: 'Lithuania',    'Life expectancy': 73.6,    GDP: 14252.42853,    Population: 29491,  },  {    Country: 'Mexico',    'Life expectancy': 76.7,    GDP: 9143.128494,    Population: 12589949,  },  {    Country: 'Norway',    'Life expectancy': 81.8,    GDP: 7455.24654,    Population: 518867,  },  {    Country: 'Philippines',    'Life expectancy': 68.5,    GDP: 2878.33837,    Population: 11716359,  },  {    Country: 'Samoa',    'Life expectancy': 74,    GDP: 4149.363444,    Population: 193759,  },  {    Country: 'Sao Tome and Principe',    'Life expectancy': 67.5,    GDP: 1624.63963,    Population: 195553,  },  {    Country: 'Senegal',    'Life expectancy': 66.7,    GDP: 98.7256145,    Population: 14976994,  },  {    Country: 'Switzerland',    'Life expectancy': 83.4,    GDP: 89899.8424,    Population: 8282396,  },  {    Country: 'Tajikistan',    'Life expectancy': 69.7,    GDP: 918.6771543,    Population: 8548651,  },  {    Country: 'Ukraine',    'Life expectancy': 71.3,    GDP: 2124.662666,    Population: 4515429,  },  {    Country: 'Uruguay',    'Life expectancy': 77,    GDP: 15524.84247,    Population: 3431552,  },  {    Country: 'Zimbabwe',    'Life expectancy': 67,    GDP: 118.69383,    Population: 15777451,  },];
export function ScatterChartUsageExampleAxisLabel() {  return (    <Card>      <p className="text-lg text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">Life expectancy vs. GDP per capita</p>      <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content leading-6">As of 2015. Source: Our World in Data </p>      <ScatterChart        className="-ml-2 mt-6 h-80"        yAxisWidth={50}        data={chartdata}        category="Country"        x="GDP"        y="Life expectancy"        size="Population"        showOpacity={true}        minYValue={60}        valueFormatter={{          x: (amount) => `$${(amount / 1000).toFixed(1)}K`,          y: (lifeExp) => `${lifeExp} yrs`,          size: (population) => `${(population / 1000000).toFixed(1)}M people`,        }}        enableLegendSlider        xAxisLabel="GDP"        yAxisLabel="Life expectancy"      />    </Card>  );}

API Reference: ScatterChart

client component

data: The source data, in which each entry is a dictionary.

x: Select the series to populate the x axis.

y: Select the series to populate the y axis.

category: Used to assign different values for coloring data points according to your data.

size: Select the series to set bubble size representing a third data dimension.

sizeRange: Set the range of the size.

colors: Change the default colors. When using Typescript, import the Color type provided by Tremor.

valueFormatter: Controls the text formatting for the x, y, and z values. When using Typescript, import the ScatterChartValueFormatter type provided by Tremor.

showOpacity: Add an opacity to the data points. Helpful when lot's of them overlap

startEndOnly: Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.

showXAxis: Controls the visibility of the X axis.

showYAxis: Controls the visibility of the Y axis.

yAxisWidth: Controls the width of the vertical axis.

intervalType: Controls the interval logic of the X axis and how ticks and labels are placed.

rotateLabelX: Rotating the labels of the x-axis.

showAnimation: Sets an animation to the chart when it is loaded.

animationDuration: The animation duration in ms.

showTooltip: Controls the visibility of the tooltip.

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"

showLegend: Controls the visibility of the legend.

showGridLines: Controls the visibility of the gridlines within the plotted area.

autoMinXValue: Adjusts the minimum value in relation to the magnitude of the data for the X axis.

minXValue: Sets the minimum value of the shown chart data for the X axis.

maxXValue: Sets the maximum value of the shown chart data for the X axis.

autoMinYValue: Adjusts the minimum value in relation to the magnitude of the data for the Y axis.

minYValue: Sets the minimum value of the shown chart data for the Y axis.

maxYValue: Sets the maximum value of the shown chart data for the Y axis.

connectNulls: Connects datapoints that have null values between them

allowDecimals: Controls if the ticks of a numeric axis are displayed as decimals or not.

noDataText: The displayed text when the data is empty.

onValueChange: Callback function for when the value of the component changes.

enableLegendSlider: Adds a slider functionality to the legend instead of wrapping the legend items.

tickGap: Sets the minimum gap between two adjacent labels.

xAxisLabel: Add a label to the x-axis.

yAxisLabel: Add a label to the x-axis.

Theming

Scatter 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
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

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

Scatter Chart

Import ScatterChart

Usage example

Usage example with click event

Usage example with custom tooltip

Usage example with a custom colors

Usage example with x-axis and y-axis labels

API Reference: ScatterChart

Theming

Scatter Chart

Chart Tooltip