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.
Population growth rate (1951 to 2021)
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
- data
- Description
- The source data, in which each entry is a dictionary.
- Type
- Object
- Default
- -
- Values
- categoriesoptional
- Description
- Select the categories from your data. Used to populate the legend and toolip.
- Type
- array
- Default
- -
- Values
- E.g. ['Cat1', 'Cat2']
- dataKeyoptional
- Description
- Sets the key to map the data to the axis.
- Type
- string
- Default
- Values
- colorsoptional
- Description
- Change the default colors.
- Type
- array
- Default
- -
- Values
- E.g. ['blue', 'indigo']
- valueFormatteroptional
- Description
- Controls the text formatting for the y-axis values.
- Type
- function
- Default
- Values
- startEndOnlyoptional
- Description
- Show only the first and last elements in the x-axis. Great for smaller charts or sparklines.
- Type
- boolean
- Default
- false
- Values
- true, false
- showXAxisoptional
- Description
- Controls the visibility of the horizontal axis.
- Type
- boolean
- Default
- true
- Values
- true, false
- showYAxisoptional
- Description
- Controls the visibility of the horizontal axis.
- Type
- boolean
- Default
- true
- Values
- true, false
- autoMinValueoptional
- Description
- Adjusts the minimum value in relation to the magnitude of the data.
- Type
- boolean
- Default
- true
- Values
- true, false
- minValueoptional
- Description
- Sets the minimum value of the shown chart data.
- Type
- number
- Default
- -
- Values
- maxValueoptional
- Description
- Sets the maximum value of the shown chart data.
- Type
- number
- Default
- -
- Values
- yAxisWidthoptional
- Description
- Controls width of the vertical axis.
- Type
- number
- Default
- -
- Values
- showTooltipoptional
- Description
- Controls the visibility of the tooltip.
- Type
- boolean
- Default
- true
- Values
- true, false
- showLegendoptional
- Description
- Controls the visibility of the legend.
- Type
- boolean
- Default
- true
- Values
- true, false
- showGridLinesoptional
- Description
- Controls the visibility of the gridlines within the plotted area.
- Type
- boolean
- Default
- true
- Values
- true, false
- showAnimationoptional
- Description
- Sets an animation to the chart when it is loaded.
- Type
- boolean
- Default
- true
- Values
- true, false
- heightoptional
- marginTopoptional
Bar ChartDonut Chart