Visualizations
Spark Charts
A small graph capable of visualizing data in a simplified form.
import { SparkAreaChart, SparkBarChart, SparkLineChart } from '@tremor/react';
const chartdata = [ { month: 'Jan 21', Performance: 4000, Benchmark: 3000, }, { month: 'Feb 21', Performance: 3000, Benchmark: 2000, }, { month: 'Mar 21', Performance: 2000, Benchmark: 1700, }, { month: 'Apr 21', Performance: 2780, Benchmark: 2500, }, { month: 'May 21', Performance: 1890, Benchmark: 1890, }, { month: 'Jun 21', Performance: 2390, Benchmark: 2000, }, { month: 'Jul 21', Performance: 3490, Benchmark: 3000, },];
export const SparkChartHero = () => { return ( <div className="flex flex-wrap justify-center gap-12 py-20"> <SparkAreaChart data={chartdata} index="date" categories={['Performance', 'Benchmark']} colors={['blue', 'cyan']} /> <SparkLineChart data={chartdata} index="date" categories={['Performance', 'Benchmark']} colors={['blue', 'cyan']} /> <SparkBarChart data={chartdata} index="date" categories={['Performance', 'Benchmark']} colors={['blue', 'cyan']} /> </div> );};Import Spark Charts
Tremor exports three components to create spark charts.
import { SparkAreaChart, SparkLineChart, SparkBarChart } from '@tremor/react';
Usage example
The example below shows a composition combining a SparkAreaChart with text elements. Note: For the height, a number value has to be set (e.g. h-12. Keep in mind that h-full won't work.)
APPL
Apple Inc.179.26+1.72%
import { Card, SparkAreaChart } from '@tremor/react';
const chartdata = [ { month: 'Jan 21', Performance: 4000, }, { month: 'Feb 21', Performance: 3000, }, { month: 'Mar 21', Performance: 2000, }, { month: 'Apr 21', Performance: 2780, }, { month: 'May 21', Performance: 1890, }, { month: 'Jun 21', Performance: 2390, }, { month: 'Jul 21', Performance: 3490, },];
export function SparkAreaUsageExample() { return ( <Card className="mx-auto flex max-w-lg items-center justify-between px-4 py-3.5"> <div className="flex items-center space-x-2.5"> <p className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">APPL</p> <span className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Apple Inc.</span> </div> <SparkAreaChart data={chartdata} categories={['Performance']} index={'month'} colors={['emerald']} className="h-8 w-20 sm:h-10 sm:w-36" /> <div className="flex items-center space-x-2.5"> <span className="font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">179.26</span> <span className="rounded bg-emerald-500 px-2 py-1 text-tremor-default font-medium text-white"> +1.72% </span> </div> </Card> );}Usage example with a custom colors
The example below shows a chart with custom colors. Note, that for the custom HEX color to work, the tailwind.config.js has to be adjusted. Learn more about custom colors in your theming section.
// NOTE: The tailwind.config.js has to be extended if you use custom HEX color// ...['[#f0652f]'].flatMap((customColor) => [// `bg-${customColor}`,// `border-${customColor}`,// `hover:bg-${customColor}`,// `hover:border-${customColor}`,// `hover:text-${customColor}`,// `fill-${customColor}`,// `ring-${customColor}`,// `stroke-${customColor}`,// `text-${customColor}`,// `ui-selected:bg-${customColor}]`,// `ui-selected:border-${customColor}]`,// `ui-selected:text-${customColor}`,// ]),
import { SparkAreaChart } from '@tremor/react';
const chartdata = [ { month: 'Jan 21', Performance: 4000, }, { month: 'Feb 21', Performance: 3000, }, { month: 'Mar 21', Performance: 2000, }, { month: 'Apr 21', Performance: 2780, }, { month: 'May 21', Performance: 1890, }, { month: 'Jun 21', Performance: 2390, }, { month: 'Jul 21', Performance: 3490, },];
export function SparkAreaUsageExampleWithCustomColor() { return ( <div className="flex justify-center"> <SparkAreaChart data={chartdata} categories={['Performance']} index={'month'} colors={['#f0652f']} className="h-10 w-36" /> </div> );}API Reference: SparkAreaChart
client component- data
- The source data, in which each entry is a dictionary.
Required
any[]
- categories
- Select the categories from your data. Used to populate the legend and toolip.
Required
string[]
- index
- Sets the key to map the data to the axis.
Required
string
- colors
- Change the default colors. When using Typescript, import the Color type provided by Tremor.
(Color | string)[]
- showAnimation
- Sets an animation to the chart when it is loaded.
boolean
- animationDuration
- The animation duration in ms.
number
- showGradient
- Controls the style of the tinted area.
boolean
- stack
- Controls the charts behavior to be stacked or placed along each other.
boolean
- curveType
- Controls the type of the chart curve
string
- connectNulls
- Connects datapoints that have null values between them
boolean
- noDataText
- The displayed text when the data is empty.
string
- autoMinValue
- Adjusts the minimum value in relation to the magnitude of the data.
boolean
- minValue
- Sets the minimum value of the shown chart data.
number
- maxValue
- Sets the maximum value of the shown chart data.
number
API Reference: SparkLineChart
client component- data
- The source data, in which each entry is a dictionary.
Required
any[]
- categories
- Select the categories from your data. Used to populate the legend and toolip.
Required
string[]
- index
- Sets the key to map the data to the axis.
Required
string
- colors
- Change the default colors. When using Typescript, import the Color type provided by Tremor.
(Color | string)[]
- showAnimation
- Sets an animation to the chart when it is loaded.
boolean
- animationDuration
- The animation duration in ms.
number
- stack
- Controls the charts behavior to be stacked or placed along each other.
boolean
- curveType
- Controls the type of the chart curve
string
- connectNulls
- Connects datapoints that have null values between them
boolean
- noDataText
- The displayed text when the data is empty.
string
API Reference: SparkBarChart
client component- data
- The source data, in which each entry is a dictionary.
Required
any[]
- categories
- Select the categories from your data. Used to populate the legend and toolip.
Required
string[]
- index
- Sets the key to map the data to the axis.
Required
string
- colors
- Change the default colors. When using Typescript, import the Color type provided by Tremor.
(Color | string)[]
- showAnimation
- Sets an animation to the chart when it is loaded.
boolean
- animationDuration
- The animation duration in ms.
number
- stack
- Controls the charts behavior to be stacked or placed along each other.
boolean
- relative
- Controls the numeric axis values to be displayed relatively.
boolean
- noDataText
- The displayed text when the data is empty.
string