Sparkline Chart

+8.36%

-7.81%

import { SparklineChart } from "@/components/sol/sparkline-chart";

export function SparklineChartDemo() {
  const data = [
    { time: "2024-01-01", value: 32.51 },
    { time: "2024-01-02", value: 31.11 },
    { time: "2024-01-03", value: 35.02 },
    { time: "2024-01-04", value: 37.32 },
    { time: "2024-01-05", value: 35.17 },
  ];

  return <SparklineChart series={data} />;
}

Installation

pnpm dlx shadcn@latest add @solanaui/sparkline-chart

npx shadcn@latest add @solanaui/sparkline-chart

yarn dlx shadcn@latest add @solanaui/sparkline-chart

Usage

<SparklineChart
  series={[
    { time: "2024-01-01", value: 32.51 },
    { time: "2024-01-02", value: 31.11 },
    { time: "2024-01-03", value: 35.02 },
  ]}
/>

Source Code

"use client";

import { Line, LineChart, YAxis } from "recharts";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import { cn } from "@/lib/utils";

interface SparklineChartProps {
  series: {
    time: string;
    value: number;
  }[];
  className?: string;
}

const chartConfig = {
  value: {
    label: "Value",
  },
} satisfies ChartConfig;

const POSITIVE_COLOR = "hsl(160 84% 39%)";
const NEGATIVE_COLOR = "hsl(0 84% 67%)";

const SparklineChart = ({ series, className }: SparklineChartProps) => {
  if (!series.length) return null;

  const minValue = Math.min(...series.map((s) => s.value));
  const maxValue = Math.max(...series.map((s) => s.value));

  const firstValue = series[0].value;
  const lastValue = series[series.length - 1].value;
  const percentChange =
    firstValue !== 0 ? ((lastValue - firstValue) / firstValue) * 100 : 0;
  const isPositive = percentChange >= 0;
  const chartColor = isPositive ? POSITIVE_COLOR : NEGATIVE_COLOR;

  return (
    <div className={cn("relative w-full h-[60px]", className)}>
      <ChartContainer
        config={chartConfig}
        className="w-full h-[60px] shrink-0 pr-12"
      >
        <LineChart accessibilityLayer data={series}>
          <YAxis domain={[minValue, maxValue]} hide />
          <Line
            dataKey="value"
            type="natural"
            dot={false}
            stroke={chartColor}
          />
        </LineChart>
      </ChartContainer>
      <div
        className={cn(
          "absolute right-0 z-10",
          isPositive ? "top-0" : "bottom-0",
        )}
      >
        <span
          className={cn(
            "text-xs font-medium",
            isPositive ? "text-emerald-500" : "text-red-400",
          )}
        >
          {isPositive ? "+" : ""}
          {percentChange.toFixed(2)}%
        </span>
      </div>
    </div>
  );
};

export type { SparklineChartProps };
export { SparklineChart };

"use client";import { Line, LineChart, YAxis } from "recharts";import { type ChartConfig, ChartContainer } from "@/components/ui/chart";import { cn } from "@/lib/utils";interface SparklineChartProps {  series: {    time: string;    value: number;  }[];  className?: string;}const chartConfig = {  value: {    label: "Value",  },} satisfies ChartConfig;const POSITIVE_COLOR = "hsl(160 84% 39%)";const NEGATIVE_COLOR = "hsl(0 84% 67%)";const SparklineChart = ({ series, className }: SparklineChartProps) => {  if (!series.length) return null;  const minValue = Math.min(...series.map((s) => s.value));  const maxValue = Math.max(...series.map((s) => s.value));  const firstValue = series[0].value;  const lastValue = series[series.length - 1].value;  const percentChange =    firstValue !== 0 ? ((lastValue - firstValue) / firstValue) * 100 : 0;  const isPositive = percentChange >= 0;  const chartColor = isPositive ? POSITIVE_COLOR : NEGATIVE_COLOR;  return (    <div className={cn("relative w-full h-[60px]", className)}>      <ChartContainer        config={chartConfig}        className="w-full h-[60px] shrink-0 pr-12"      >        <LineChart accessibilityLayer data={series}>          <YAxis domain={[minValue, maxValue]} hide />          <Line            dataKey="value"            type="natural"            dot={false}            stroke={chartColor}          />        </LineChart>      </ChartContainer>      <div        className={cn(          "absolute right-0 z-10",          isPositive ? "top-0" : "bottom-0",        )}      >        <span          className={cn(            "text-xs font-medium",            isPositive ? "text-emerald-500" : "text-red-400",          )}        >          {isPositive ? "+" : ""}          {percentChange.toFixed(2)}%        </span>      </div>    </div>  );};export type { SparklineChartProps };export { SparklineChart };

Installation

Usage

Source Code

On this page