Components

Line Chart

A line chart is a graphical representation that connects one or more series of data points with a continuous line.

   

Import LineChart

Tremor exports one component to create a line chart.

import { LineChart } from "@tremor/react";

Usage example

The example below shows a chart composition combining a Card with Title and LineChart components. Note: For the height, a number value has to b set (e.g, h-72, or h-[500px]. Keep in mind that h-full won't work.)

import { Card, Title, LineChart } from "@tremor/react";

const chartdata = [
  {
    year: 1951,
    "Population growth rate": 1.74,
  },
  {
    year: 1952,
    "Population growth rate": 1.93,
  },
  {
    year: 1953,
    "Population growth rate": 1.9,
  },
  {
    year: 1954,
    "Population growth rate": 1.98,
  },
  {
    year: 1955,
    "Population growth rate": 2,
  },
];

const dataFormatter = (number: number) =>
  `${Intl.NumberFormat("us").format(number).toString()}%`;

export default LineChart = () => (
  <Card>
    <Title>Population growth rate (1951 to 2021)</Title>
    <LineChart
      className="mt-6"
      data={chartdata}
      index="year"
      categories={["Population growth rate"]}
      colors={["blue"]}
      valueFormatter={dataFormatter}
      yAxisWidth={40}
    />
  </Card>
);

API Reference: LineChart