Chart

Renders an interactive line chart with a tooltip that follows the cursor. It shows data points, X-axis labels, and a smooth line. Use it to display time-series data or numerical trends.

bytom from Spell

Installation

terminal

pnpm dlx layro-cli add @xxtomm/chart

npx layro-cli add @xxtomm/chart

npx layro-cli add @xxtomm/chart

bunx layro-cli add @xxtomm/chart

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

const VIEWBOX_W = 640;
const VIEWBOX_H = 220;
const PAD_X = 0;
const PAD_Y_TOP = 24;
const PAD_Y_BOTTOM = 12;
const LINE_WIDTH = 2;
const CORNER_RADIUS = 2.5;
const TRANSITION = "200ms cubic-bezier(0.16, 1, 0.3, 1)";
const TOOLTIP_SHADOW = [