Visualization

Spark Chart

Small graph capable of visualizing data in a simplified form..

"use client"
import {  SparkAreaChart,  SparkBarChart,  SparkLineChart,} from "@/components/SparkChart"
const chartdata = [  {    month: "Jan 23",    Performance: 4000,    Benchmark: 3000,  },  {    month: "Feb 23",    Performance: 3000,    Benchmark: 2000,  },  {    month: "Mar 23",    Performance: 2000,    Benchmark: 1700,  },  {    month: "Apr 23",    Performance: 2780,    Benchmark: 2500,  },  {    month: "May 23",    Performance: 1890,    Benchmark: 1890,  },  {    month: "Jun 23",    Performance: 2390,    Benchmark: 2000,  },  {    month: "Jul 23",    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"]}      />      <SparkLineChart        data={chartdata}        index="date"        categories={["Performance", "Benchmark"]}      />      <SparkBarChart        data={chartdata}        index="date"        categories={["Performance", "Benchmark"]}      />    </div>  )}

Installation

1
Install dependencies:
npm i recharts

Add component:

Copy and paste the code into your project’s component directory. Do not forget to update the import paths. If you have not added the required chartUtils.ts, check out the add utilities and helpers section in installation.

// Tremor Spark Chart [v0.1.2]/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"
import React from "react"import {  Area,  Bar,  Line,  AreaChart as RechartsAreaChart,  BarChart as RechartsBarChart,  LineChart as RechartsLineChart,  ResponsiveContainer,  XAxis,  YAxis,} from "recharts"import { AxisDomain } from "recharts/types/util/types"
import {  AvailableChartColors,  AvailableChartColorsKeys,  constructCategoryColors,  getColorClassName,  getYAxisDomain,} from "@/lib/chartUtils"import { cx } from "@/lib/utils"
//#region SparkAreaChart
interface SparkAreaChartProps extends React.HTMLAttributes<HTMLDivElement> {  data: Record<string, any>[]  categories: string[]  index: string  colors?: AvailableChartColorsKeys[]  autoMinValue?: boolean  minValue?: number  maxValue?: number  connectNulls?: boolean  type?: "default" | "stacked" | "percent"  fill?: "gradient" | "solid" | "none"}
const SparkAreaChart = React.forwardRef<HTMLDivElement, SparkAreaChartProps>(  (props, forwardedRef) => {    const {      data = [],      categories = [],      index,      colors = AvailableChartColors,      autoMinValue = false,      minValue,      maxValue,      connectNulls = false,      type = "default",      className,      fill = "gradient",      ...other    } = props
    const categoryColors = constructCategoryColors(categories, colors)    const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue)    const stacked = type === "stacked" || type === "percent"    const areaId = React.useId()
    const getFillContent = (fillType: SparkAreaChartProps["fill"]) => {      switch (fillType) {        case "none":          return <stop stopColor="currentColor" stopOpacity={0} />        case "gradient":          return (            <>              <stop offset="5%" stopColor="currentColor" stopOpacity={0.4} />              <stop offset="95%" stopColor="currentColor" stopOpacity={0} />            </>          )        case "solid":          return <stop stopColor="currentColor" stopOpacity={0.3} />        default:          return <stop stopColor="currentColor" stopOpacity={0.3} />      }    }
    return (      <div        ref={forwardedRef}        className={cx("h-12 w-28", className)}        tremor-id="tremor-raw"        {...other}      >        <ResponsiveContainer>          <RechartsAreaChart            data={data}            margin={{              bottom: 1,              left: 1,              right: 1,              top: 1,            }}            stackOffset={type === "percent" ? "expand" : undefined}          >            <XAxis hide dataKey={index} />            <YAxis hide={true} domain={yAxisDomain as AxisDomain} />
            {categories.map((category) => {              const categoryId = `${areaId}-${category.replace(/[^a-zA-Z0-9]/g, "")}`              return (                <React.Fragment key={category}>                  <defs>                    <linearGradient                      key={category}                      className={cx(                        getColorClassName(                          categoryColors.get(                            category,                          ) as AvailableChartColorsKeys,                          "text",                        ),                      )}                      id={categoryId}                      x1="0"                      y1="0"                      x2="0"                      y2="1"                    >                      {getFillContent(fill)}                    </linearGradient>                  </defs>                  <Area                    className={cx(                      getColorClassName(                        categoryColors.get(                          category,                        ) as AvailableChartColorsKeys,                        "stroke",                      ),                    )}                    dot={false}                    strokeOpacity={1}                    name={category}                    type="linear"                    dataKey={category}                    stroke=""                    strokeWidth={2}                    strokeLinejoin="round"                    strokeLinecap="round"                    isAnimationActive={false}                    connectNulls={connectNulls}                    stackId={stacked ? "stack" : undefined}                    fill={`url(#${categoryId})`}                  />                </React.Fragment>              )            })}          </RechartsAreaChart>        </ResponsiveContainer>      </div>    )  },)
SparkAreaChart.displayName = "SparkAreaChart"
//#region SparkLineChart
interface SparkLineChartProps extends React.HTMLAttributes<HTMLDivElement> {  data: Record<string, any>[]  categories: string[]  index: string  colors?: AvailableChartColorsKeys[]  autoMinValue?: boolean  minValue?: number  maxValue?: number  connectNulls?: boolean}
const SparkLineChart = React.forwardRef<HTMLDivElement, SparkLineChartProps>(  (props, forwardedRef) => {    const {      data = [],      categories = [],      index,      colors = AvailableChartColors,      autoMinValue = false,      minValue,      maxValue,      connectNulls = false,      className,      ...other    } = props
    const categoryColors = constructCategoryColors(categories, colors)    const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue)
    return (      <div        ref={forwardedRef}        className={cx("h-12 w-28", className)}        tremor-id="tremor-raw"        {...other}      >        <ResponsiveContainer>          <RechartsLineChart            data={data}            margin={{              bottom: 1,              left: 1,              right: 1,              top: 1,            }}          >            <XAxis hide dataKey={index} />            <YAxis hide={true} domain={yAxisDomain as AxisDomain} />            {categories.map((category) => (              <Line                className={cx(                  getColorClassName(                    categoryColors.get(category) as AvailableChartColorsKeys,                    "stroke",                  ),                )}                dot={false}                strokeOpacity={1}                key={category}                name={category}                type="linear"                dataKey={category}                stroke=""                strokeWidth={2}                strokeLinejoin="round"                strokeLinecap="round"                isAnimationActive={false}                connectNulls={connectNulls}              />            ))}          </RechartsLineChart>        </ResponsiveContainer>      </div>    )  },)
SparkLineChart.displayName = "SparkLineChart"
//#region SparkBarChart
interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {  data: Record<string, any>[]  index: string  categories: string[]  colors?: AvailableChartColorsKeys[]  autoMinValue?: boolean  minValue?: number  maxValue?: number  barCategoryGap?: string | number  type?: "default" | "stacked" | "percent"}
const SparkBarChart = React.forwardRef<HTMLDivElement, BarChartProps>(  (props, forwardedRef) => {    const {      data = [],      categories = [],      index,      colors = AvailableChartColors,      autoMinValue = false,      minValue,      maxValue,      barCategoryGap,      type = "default",      className,      ...other    } = props
    const categoryColors = constructCategoryColors(categories, colors)
    const yAxisDomain = getYAxisDomain(autoMinValue, minValue, maxValue)    const stacked = type === "stacked" || type === "percent"
    return (      <div        ref={forwardedRef}        className={cx("h-12 w-28", className)}        tremor-id="tremor-raw"        {...other}      >        <ResponsiveContainer>          <RechartsBarChart            data={data}            margin={{              bottom: 1,              left: 1,              right: 1,              top: 1,            }}            stackOffset={type === "percent" ? "expand" : undefined}            barCategoryGap={barCategoryGap}          >            <XAxis hide dataKey={index} />            <YAxis hide={true} domain={yAxisDomain as AxisDomain} />
            {categories.map((category) => (              <Bar                className={cx(                  getColorClassName(                    categoryColors.get(category) as AvailableChartColorsKeys,                    "fill",                  ),                )}                key={category}                name={category}                type="linear"                dataKey={category}                stackId={stacked ? "stack" : undefined}                isAnimationActive={false}                fill=""              />            ))}          </RechartsBarChart>        </ResponsiveContainer>      </div>    )  },)
SparkBarChart.displayName = "SparkBarChart"
export { SparkAreaChart, SparkLineChart, SparkBarChart }

Example with context

APPL

Apple Inc.

179.26+1.72%

"use client"
import React from "react"
import { Card } from "@/components/Card"import { SparkAreaChart } from "@/components/SparkChart"
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 SparkAreaExample() {  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="font-medium text-gray-700 dark:text-gray-300">APPL</p>        <span className="text-sm text-gray-500 dark:text-gray-500">          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-gray-700 dark:text-gray-300">          179.26        </span>        <span className="rounded bg-emerald-500 px-2 py-1 text-sm font-medium text-white">          +1.72%        </span>      </div>    </Card>  )}

Example of SparkAreaChart with different fill types

gradient (default)

solid

none

"use client"
import { SparkAreaChart } from "@/components/SparkChart"
const chartdata = [  {    month: "Jan 23",    Performance: 4000,    Benchmark: 3000,  },  {    month: "Feb 23",    Performance: 3000,    Benchmark: 2000,  },  {    month: "Mar 23",    Performance: 2000,    Benchmark: 1700,  },  {    month: "Apr 23",    Performance: 2780,    Benchmark: 2500,  },  {    month: "May 23",    Performance: 1890,    Benchmark: 1890,  },  {    month: "Jun 23",    Performance: 2390,    Benchmark: 2000,  },  {    month: "Jul 23",    Performance: 3490,    Benchmark: 3000,  },]
export const SparkChartFillExample = () => {  return (    <div className="flex flex-wrap justify-center gap-12 py-20 text-sm text-gray-700 dark:text-gray-300">      <div className="flex flex-col items-center justify-center gap-3">        <p>gradient (default)</p>        <SparkAreaChart          data={chartdata}          index="date"          categories={["Performance", "Benchmark"]}          fill="gradient"        />      </div>      <div className="flex flex-col items-center justify-center gap-3">        <p>solid</p>        <SparkAreaChart          data={chartdata}          index="date"          categories={["Performance", "Benchmark"]}          fill="solid"        />      </div>      <div className="flex flex-col items-center justify-center gap-3">        <p>none</p>        <SparkAreaChart          data={chartdata}          index="date"          categories={["Performance", "Benchmark"]}          fill="none"        />      </div>    </div>  )}

API Reference: SparkAreaChart, SparkLineChart, and SparkBarChart

data: Data used to display the chart.

index: Key of the data object to map the data to the x axis.

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

colors: Change the colors of the categories. To add, update, or remove the colors, edit the 'chartColors' array in your chartUtils.ts file. The AvailableChartColorsKeys will be automatically updated.

type: (SparkAreaChart Only!) Select how chart areas are positioned relative to each other.

fill: Select the fill variant of the area.

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.

connectNulls: Connects datapoints that have null values between them.