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.

categories: Select the categories from your data. Used to populate the legend and toolip.

index: Sets the key to map the data to the axis.

colors: Change the default colors. When using Typescript, import the Color type provided by Tremor.

showAnimation: Sets an animation to the chart when it is loaded.

animationDuration: The animation duration in ms.

showGradient: Controls the style of the tinted area.

stack: Controls the charts behavior to be stacked or placed along each other.

curveType: Controls the type of the chart curve

connectNulls: Connects datapoints that have null values between them

noDataText: The displayed text when the data is empty.

autoMinValue: Adjusts the minimum value in relation to the magnitude of the data.

minValue: Sets the minimum value of the shown chart data.

maxValue: Sets the maximum value of the shown chart data.

API Reference: SparkLineChart

client component

data: The source data, in which each entry is a dictionary.

categories: Select the categories from your data. Used to populate the legend and toolip.

index: Sets the key to map the data to the axis.

colors: Change the default colors. When using Typescript, import the Color type provided by Tremor.

showAnimation: Sets an animation to the chart when it is loaded.

animationDuration: The animation duration in ms.

stack: Controls the charts behavior to be stacked or placed along each other.

curveType: Controls the type of the chart curve

connectNulls: Connects datapoints that have null values between them

noDataText: The displayed text when the data is empty.

API Reference: SparkBarChart

client component

data: The source data, in which each entry is a dictionary.

categories: Select the categories from your data. Used to populate the legend and toolip.

index: Sets the key to map the data to the axis.

colors: Change the default colors. When using Typescript, import the Color type provided by Tremor.

showAnimation: Sets an animation to the chart when it is loaded.

animationDuration: The animation duration in ms.

stack: Controls the charts behavior to be stacked or placed along each other.

relative: Controls the numeric axis values to be displayed relatively.

noDataText: The displayed text when the data is empty.