Candlestick Chart

A composable OHLC candlestick chart with gradients, patterns, tooltips, and hover interactions

Installation

terminal

pnpm dlx layro-cli add @bklit/candlestick-chart

npx layro-cli add @bklit/candlestick-chart

npx layro-cli add @bklit/candlestick-chart

bunx layro-cli add @bklit/candlestick-chart

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

Code

Dependencies

Demo

"use client";

import { bisector } from "d3-array";
import { scaleLinear, scaleTime } from "d3-scale";
import type { Transition } from "motion/react";
import { domAnimation, LazyMotion } from "motion/react";
import {
  Children,
  isValidElement,
  memo,
  type ReactElement,
  type ReactNode,
  useCallback,
  useEffect,