Line Chart | bklit-ui

Preview

Installation

import CurvedLineChart from '@repo/ui/line-chart';

Usage

import CurvedLineChart from "@repo/ui/line-chart";

export default function Dashboard() {
  return (
    <div className="w-full">
      <CurvedLineChart />
    </div>
  );
}

Props

Prop	Type	Default	Description
`animationDuration`	`number`	`1500`	Animation duration in milliseconds
`showGrid`	`boolean`	`true`	Show horizontal grid lines
`markers`	`ChartMarker[]`	`[]`	Markers to display on the chart

With Grid

<CurvedLineChart showGrid />

Custom Animation Duration

<CurvedLineChart animationDuration={2000} />

Markers

Markers allow you to annotate specific dates on the chart. They appear at the top of the chart area and integrate with the tooltip when hovering.

Marker Interface

interface ChartMarker {
  date: Date; // Date for marker position
  icon: React.ReactNode; // Icon (emoji or component)
  title: string; // Tooltip title
  description?: string; // Optional description
  content?: React.ReactNode; // Custom tooltip content
  color?: string; // Optional background color
  onClick?: () => void; // Click handler
  href?: string; // URL to navigate to
  target?: "_blank" | "_self"; // Link target (default: "_self")
}

Example with Markers

import CurvedLineChart, { type ChartMarker } from "@repo/ui/line-chart";

const markers: ChartMarker[] = [
  {
    date: new Date("2025-01-05"),
    icon: "🚀",
    title: "v1.2.0 Released",
    description: "New chart animations",
  },
  {
    date: new Date("2025-01-05"), // Same day - will stack!
    icon: "🐛",
    title: "Bug Fix",
    description: "Fixed tooltip positioning",
  },
  {
    date: new Date("2025-01-12"),
    icon: "✨",
    title: "Feature Launch",
  },
];

<CurvedLineChart markers={markers} />;

Clickable Markers

Markers can trigger actions or navigate to URLs:

const markers: ChartMarker[] = [
  {
    date: new Date("2025-01-05"),
    icon: "🚀",
    title: "v1.2.0 Released",
    href: "https://github.com/example/releases/v1.2.0",
    target: "_blank", // Opens in new tab
  },
  {
    date: new Date("2025-01-06"),
    icon: "📊",
    title: "View Report",
    onClick: () => openModal("report"),
  },
];

Clickable markers show a hover effect (scale + shadow) and display a ↗ indicator in the tooltip.

Stacking Behavior

When multiple markers share the same date:

They stack vertically with a count badge
Hovering fans them out in a smooth arc animation
All marker details appear in the tooltip
Each marker can have its own click action

Data Structure

The chart expects an array of DataPoint objects:

interface DataPoint {
  date: Date;
  uniqueUsers: number;
  pageviews: number;
}

Example Data

const data: DataPoint[] = [
  { date: new Date("2025-01-01"), uniqueUsers: 1200, pageviews: 4500 },
  { date: new Date("2025-01-02"), uniqueUsers: 1350, pageviews: 4800 },
  { date: new Date("2025-01-03"), uniqueUsers: 1100, pageviews: 4200 },
  { date: new Date("2025-01-04"), uniqueUsers: 1450, pageviews: 5100 },
  { date: new Date("2025-01-05"), uniqueUsers: 1380, pageviews: 4900 },
  { date: new Date("2025-01-06"), uniqueUsers: 1520, pageviews: 5400 },
  { date: new Date("2025-01-07"), uniqueUsers: 1600, pageviews: 5800 },
];

Dependencies

This component requires the following packages:

pnpm add @visx/shape @visx/curve @visx/scale @visx/gradient @visx/responsive @visx/event @visx/grid d3-array