Trade Chart

solanaui/trade-chart

FreeComponent

A professional candlestick chart using lightweight-charts for trading interfaces.

Live preview

live · rendered by the registry

Rendered by solanaui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://www.solanaui.dev/r/trade-chart.json

Source

src/registry/sol/trade-chart.tsxwww.solanaui.dev/r/trade-chart.json

1"use client";
2 
3import type {
4  CandlestickData,
5  CandlestickSeriesPartialOptions,
6  DeepPartial,
7  TimeChartOptions,
8} from "lightweight-charts";
9import { CandlestickSeries, ColorType, createChart } from "lightweight-charts";
10import React from "react";
11 
12interface TradeChartProps {
13  data: CandlestickData[];
14  visibleBars?: number;
15  className?: string;
16  chartOptions?: DeepPartial<TimeChartOptions>;
17  seriesOptions?: DeepPartial<CandlestickSeriesPartialOptions>;
18}
19 
20const LIGHT_COLORS = {
21  background: "rgb(255, 255, 255)",
22  foreground: "rgb(37, 37, 37)",
23  border: "rgb(235, 235, 235)",
24  mutedForeground: "rgb(142, 142, 142)",
25};
26 
27const DARK_COLORS = {
28  background: "rgb(37, 37, 37)",
29  foreground: "rgb(251, 251, 251)",
30  border: "rgba(255, 255, 255, 0.1)",
31  mutedForeground: "rgb(180, 180, 180)",
32};
33 
34const TradeChart = ({
35  data,
36  visibleBars,
37  className = "h-[320px] w-full",
38  chartOptions,
39  seriesOptions,
40}: TradeChartProps) => {
41  const containerRef = React.useRef<HTMLDivElement>(null);
42  const chartRef = React.useRef<ReturnType<typeof createChart> | null>(null);
43  const [isDark, setIsDark] = React.useState(() => {
44    if (typeof window === "undefined") return false;
45    return document.documentElement.classList.contains("dark");
46  });
47 
48  // Watch for theme changes on <html> class
49  React.useEffect(() => {
50    const observer = new MutationObserver(() => {
51      setIsDark(document.documentElement.classList.contains("dark"));
52    });
53    observer.observe(document.documentElement, {
54      attributes: true,
55      attributeFilter: ["class"],
56    });
57    return () => observer.disconnect();
58  }, []);
59 
60  // Stable serialized keys so inline object literals don't cause re-renders
61  const chartOptionsKey = JSON.stringify(chartOptions);
62  const seriesOptionsKey = JSON.stringify(seriesOptions);
63 
64  React.useEffect(() => {
65    if (!containerRef.current) return;
66 
67    const parsedChartOptions = chartOptionsKey
68      ? (JSON.parse(chartOptionsKey) as DeepPartial<TimeChartOptions>)
69      : undefined;
70    const parsedSeriesOptions = seriesOptionsKey
71      ? (JSON.parse(
72          seriesOptionsKey,
73        ) as DeepPartial<CandlestickSeriesPartialOptions>)
74      : undefined;
75 
76    const colors = isDark ? DARK_COLORS : LIGHT_COLORS;
77 
78    const defaultChartOptions: DeepPartial<TimeChartOptions> = {
79      layout: {
80        textColor: colors.foreground,
81        background: {
82          type: ColorType.Solid as const,
83          color: colors.background,
84        },
85// … truncated

What it pulls in

npm packages

lightweight-charts

Files it writes

src/registry/sol/trade-chart.tsx

More from solanaui

All 31 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Action Boxaction-box	solanaui	Components	Free	no deps
Activity Feedactivity-feed	solanaui	Components	Free	1 dep
Address Displayaddress-display	solanaui	Components	Free	1 dep
Auth Cardauth-card	solanaui	Components	Free	no deps
Health Barhealth-bar	solanaui	Components	Free	no deps
Leverage Sliderleverage-slider	solanaui	Components	Free	no deps
NFT Cardnft-card	solanaui	Components	Free	no deps
Order Bookorder-book	solanaui	Components	Free	no deps