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";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <LineChart
    data={[{}]}
    categories={[]}
    dataKey=""
    colors={["blue"]}
    valueFormatter={}
    startEndOnly={false}
    showXAxis={true}
    showYAxis={true}
    autoMinValue={false}
    yAxisWidth="w-14"
    showTooltip={true}
    showLegend={true}
    showGridLines={true}
    showAnimation={true}
    height="h-80"
    marginTop="mt-0"
  />
);

Usage example

The example below shows a chart composition combining a Card with Title and LineChart components.

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 () => (
  <Card>
    <Title>Population growth rate (1951 to 2021)</Title>
    <LineChart
      data={chartdata}
      dataKey="year"
      categories={["Population growth rate"]}
      colors={["blue"]}
      valueFormatter={dataFormatter}  
      marginTop="mt-6"         
      yAxisWidth="w-10"
    />
  </Card>
);

API Reference: LineChart