Components

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 with Title and ScatterChart components. 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.)

import { Card, Title, Text, 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,
  },
  // ...
];

export default ScatterChartExample = () => (
  <Card>
    <Title>Life expectancy vs. GDP per capita</Title>
    <Text>As of 2015. Source: Our World in Data </Text>
    <ScatterChart
      className="h-80 mt-6 -ml-2"
      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`,
      }}
      showLegend={false}
    />
  </Card>
);

Usage example with click event

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

null

import { Card, Title, Text, 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,
  },
  // ...
];

export const ScatterChartExample2 = () => {
  const [value, setValue] = React.useState(null);
  return (
    <>
      <Card>
        <Title>Life expectancy vs. GDP per capita</Title>
        <Text>As of 2015. Source: Our World in Data </Text>
        <ScatterChart
          className="h-80 mt-6 -ml-2"
          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`,
          }}
          onValueChange={(v) => setValue(v)}
        />
      </Card>
      <pre>{JSON.stringify(value)}</pre>
    </>
  );
};

Theming

Scatter Chart

Chart Tooltip

API Reference: ScatterChart

client component