Components
Bar Chart
Bar charts compare numerical values and use the length of each bar to represent the value of each variable.
Import BarChart
Tremor exports one component to create a bar chart.
import { BarChart } from "@tremor/react";
Usage example
The example below shows a chart composition combining a Card
with Title
,
Subtitle
, Card
and BarChart
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.)
Number of species threatened with extinction (2021)
The IUCN Red List has assessed only a small share of the total known species in the world.
import { Card, Title, BarChart, Subtitle } from "@tremor/react"; const chartdata = [ { name: "Amphibians", "Number of threatened species": 2488, }, { name: "Birds", "Number of threatened species": 1445, }, { name: "Crustaceans", "Number of threatened species": 743, }, ]; const dataFormatter = (number: number) => { return "$ " + Intl.NumberFormat("us").format(number).toString(); }; export default BarChart = () => ( <Card> <Title>Number of species threatened with extinction (2021)</Title> <Subtitle> The IUCN Red List has assessed only a small share of the total known species in the world. </Subtitle> <BarChart className="mt-6" data={chartdata} index="name" categories={["Number of threatened species"]} colors={["blue"]} valueFormatter={dataFormatter} yAxisWidth={48} /> </Card> );
Usage example 2
The example below shows a chart composition combining a Card
with Title
,
Subtitle
, Card
and BarChart
components.
Writing Contest: Entries
import { Card, Title, BarChart, Subtitle } from "@tremor/react"; const chartdata2 = [ { topic: "Topic 1", "Group A": 890, "Group B": 338, "Group C": 538, "Group D": 396, "Group E": 138, "Group F": 436, }, { topic: "Topic 2", "Group A": 289, "Group B": 233, "Group C": 253, "Group D": 333, "Group E": 133, "Group F": 533, }, ]; const dataFormatter = (number: number) => { return "$ " + Intl.NumberFormat("us").format(number).toString(); }; export default BarChart = () => ( <Card> <Title>Writing Contest: Entries</Title> <BarChart className="mt-6" data={chartdata2} index="name" categories={[ "Group A", "Group B", "Group C", "Group D", "Group E", "Group F", ]} colors={["blue", "teal", "amber", "rose", "indigo", "emerald"]} valueFormatter={dataFormatter} yAxisWidth={48} /> </Card> );
API Reference: BarChart
client component
- data
- Description
- The source data, in which each entry is a dictionary.
- Type
- any[]
- Default
- Values
- categories
- Description
- Select the categories from your data. Used to populate the legend and toolip.
- Type
- string[]
- Default
- Values
- E.g. ['Cat1', 'Cat2']
- index
- Description
- Sets the key to map the data to the axis.
- Type
- string
- Default
- Values
- colorsoptional
- Description
- Change the default colors. When using Typescript, import the Color type provided by tremor.
- Type
- Color[]
- Default
- Values
- E.g. ['blue', 'indigo'].
- valueFormatteroptional
- Description
- Controls the text formatting for the y-axis values. When using Typescript, import the ValueFormatter type provided by tremor.
- Type
- ValueFormatter
- 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 X axis.
- Type
- boolean
- Default
- true
- Values
- true, false
- showYAxisoptional
- Description
- Controls the visibility of the Y axis.
- Type
- boolean
- Default
- true
- Values
- true, false
- yAxisWidthoptional
- Description
- Controls width of the vertical axis.
- Type
- number
- Default
- 56
- Values
- showAnimationoptional
- Description
- Sets an animation to the chart when it is loaded.
- Type
- boolean
- Default
- true
- Values
- true, false
- 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
- autoMinValueoptional
- Description
- Adjusts the minimum value in relation to the magnitude of the data.
- Type
- boolean
- Default
- false
- 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
- layoutoptional
- Description
- Controls the orientation (vertical, horizontal)of the bars.
- Type
- string
- Default
- horizontal
- Values
- horizontal, vertical
- stackoptional
- Description
- Controls the bars behavior to be stacked or placed along each other.
- Type
- boolean
- Default
- false
- Values
- true, false
- relativeoptional
- Description
- Controls the numeric axis values to be displayed relatively.
- Type
- boolean
- Default
- false
- Values
- true, false
- allowDecimalsoptional
- Description
- Controls if the ticks of a numeric axis are displayed as decimals or not.
- Type
- boolean
- Default
- true
- Values
- true, false
- noDataTextoptional
- Description
- The displayed text when the data is empty.
- Type
- string
- Default
- No Data
- Values