Lightweight Charts React Components

GitHubOfficialCreated by ukorvlDistributed by GitHub

Skill
Tool integration
Software development
MIT
No issues found

From the author

lightweight-charts-react-components recipes for TradingView lightweight-charts in React. Candlestick, line, and area series; volume and indicator panes; realtime WebSocket updates; infinite history on scroll; crosshair OHLC legends and tooltips; trade markers and price lines; synchronized charts; numeric options and yield-curve axes. Use when adding or fixing a financial or trading chart in a React app, or when the user mentions lightweight-charts, TradingView charts in React, or this package.

— the description by ukorvl

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a set of React components and recipes for integrating TradingView's lightweight-charts library into React applications. It simplifies the management of chart lifecycles, series creation, and data updates. The library supports various chart types including candlestick, line, and area series, along with advanced features like real-time WebSocket updates, synchronized charts, and custom tooltips. It is designed to handle complex financial data requirements such as infinite history scrolling, indicator panes, and trade markers while maintaining React's declarative programming model.

What it does

Provides React components for rendering TradingView lightweight-charts.
Manages chart and series lifecycle, including creation and cleanup.
Supports real-time data updates via WebSocket integration.
Enables complex UI features like crosshair legends, tooltips, and trade markers.
Facilitates synchronized multi-chart layouts and custom axis configurations.
Handles infinite history loading and viewport management.

When to use it

When building financial or trading dashboards in a React application.
When you need to integrate TradingView lightweight-charts with React state.
When implementing features like real-time price updates or historical data pagination.
When creating complex chart layouts with indicators, volume panes, or synchronized crosshairs.

Advantages

Declarative component-based API for chart configuration.
Automatic management of chart lifecycle and DOM cleanup.
Built-in recipes for common financial charting patterns.
Flexible data handling for both static datasets and live streaming updates.

Usage examples

“How do I create a basic line chart using lightweight-charts-react-components?”: The agent provides a code snippet using the Chart and LineSeries components, demonstrating how to pass data and configure container dimensions.
“How can I implement a tooltip that shows OHLC values on hover?”: The agent provides a recipe using onCrosshairMove to track cursor position and map it to the series data, rendering a custom React tooltip.
“How do I handle infinite scrolling for historical data?”: The agent provides a pattern for using a ref-based data store and a loadOlder callback to prepend data to the chart without losing the user's current view.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/github/lightweight-charts-react-components/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip lightweight-charts-react-components.zip -d .agents/skills

Documentation by ukorvl

lightweight-charts-react-components guide

Quick Start

Let the components manage chart and series creation and cleanup. Import components and ref types from lightweight-charts-react-components; import native data, option, and event types from lightweight-charts.

Check versions against the compatibility table below. Read declared ranges from the app's package.json, then the installed versions from the version field of node_modules/<package>/package.json for lightweight-charts-react-components, lightweight-charts, react, and react-dom. If the library is not installed, follow Installation. Ensure chart rendering runs in the browser, within the app's client boundary.
For a basic static chart, start from the minimal chart below. Otherwise, read the reference matching the requested behavior. Adapt its feed and UI; preserve its data contract, component nesting, and API readiness handling.
Choose one data owner: pass the complete dataset through data for React-owned updates, or use reactive={false} and the series API for frequent ticks.

Installation

Install the wrapper together with its lightweight-charts peer dependency, using the project's package manager. React and React DOM must already be installed.

npm install lightweight-charts-react-components lightweight-charts

Minimal chart

import type { LineData, UTCTimestamp } from "lightweight-charts";
import {
  Chart,
  LineSeries,
  TimeScale,
  TimeScaleFitContentTrigger,
} from "lightweight-charts-react-components";

// Data must be sorted ascending by time with unique times (UTC seconds here).
export function SimpleLineChart({ data }: { data: LineData<UTCTimestamp>[] }) {
  return (
    // autoSize follows the container, which needs a nonzero height.
    <Chart
      options={{ autoSize: true }}
      containerProps={{ style: { height: 300, width: "100%" } }}
    >
      <LineSeries data={data} />
      <TimeScale>
        <TimeScaleFitContentTrigger deps={[]} />
      </TimeScale>
    </Chart>
  );
}

Examples and snippets (reference files)

Read the reference matching the user's outcome. Each contains a complete TypeScript recipe, data and integration contracts, reasons for the architecture, failure modes, and acceptance checks. Combine references when a task spans several outcomes; do not load every reference for a simple chart.

User request	Reference
WebSocket candles, updating the current bar, stale history, excessive chart renders	Market data and live updates
Older history on scroll, viewport jumps, symbol/interval changes, late API responses	History and range selection
Candles plus volume, moving averages, oscillator panes, independent price scales	Price, volume, and indicators
OHLC legend, hover details, missing data, tooltip positioning	Hover legends and tooltips
Executions and signals, stop/target levels, click-to-place price lines	Trade markers and price levels
Compare assets with different prices, fixed-baseline returns, toggle comparisons	Performance comparison
Separate charts that share scrolling, zooming, and a crosshair	Synchronized charts
Trading-session shading, pane backgrounds, custom drawing that follows zoom	Session overlays and primitives
Options strikes, yield maturities, choosing a numeric or custom horizontal axis	Numeric axes and chart types

If no reference matches the request, tell the user that the skill has no recipe for it. Then build the solution from the public components and the upstream lightweight-charts API, applying the Quick Start rules and the edge cases below.

Skill compatibility

The recipes are verified against the reference versions below. These are the tested baseline, not the latest available releases.

If an installed version differs from the reference version, compare it with the compatibility range. Inside the range, recipes apply as written. Outside it, tell the user about the mismatch before writing code, because breaking API changes can affect the recipes, and verify every API the recipe uses against the installed package.

Dependency or environment	Reference version	Compatibility range and checks
`lightweight-charts-react-components`	`2.6.1`	Recipe target: `>=2.6.1 <3`. Other versions require checking installed exports, chart API refs, and reactive data behavior before adapting a recipe.
`lightweight-charts`	`5.2.1`	Declared peer: `>=5.0.8 <6`.
React and React DOM	`19.2.6`	Declared peers: `>=18.2 <20`. Keep `react` and `react-dom` on matching versions and use the application's existing React instance.
Node.js	—	Package engines: `>=18.14.0`. The app's build tools can require a newer version.
Module system	ESM	ESM `import` entry only; there is no CommonJS `require` entry.
Rendering	Browser	Charts need the DOM and canvas. Render them on the client, never during server rendering.

Common edge cases

Chart sizing: Put DOM styles on containerProps and give the chart a nonzero height.
Required ancestors: Headless chart children need a chart wrapper ancestor. Markers, PriceLine, and SeriesPrimitive belong inside their series; PriceScale, Watermark, and PanePrimitive require a Pane; TimeScaleFitContentTrigger requires a TimeScale.
API refs and readiness: Use ref.current?.api() for the native API and containerRef for the div. For Chart, use ChartApiRef<Time, IChartApi>. .api() can initially return null; follow the recipe's readiness step before imperative setup.
Viewport resets: To preserve scroll/zoom, keep the chart's key stable and live/history updates out of fit-trigger dependencies. Fit on initial load or a deliberate reset. See range handling.
Data updates: Use data for React-owned updates, or reactive={false} and the series API when per-tick React renders are measurably costly. Avoid mixing both. Reactive data is always the complete dataset. With wrapper 2.6.1 and Lightweight Charts 5.2.1, series.data() reconstructs candle and line objects; the wrapper's earlier-item reference comparison therefore sends multi-bar tail updates through setData(), even when React keeps earlier references stable. Keep data immutable, but use the chart-owned reactive={false} recipe and explicit series.update(bar) when incremental writes are required. See live updates.

Source

Adapted from ukorvl/lightweight-charts-react-components at commit 0368191127568e48aef6f7bda2ff3900e8e24756. Original author: ukorvl. The MIT license and all nine reference recipes are retained. Local corrections in live updates reject malformed timestamps and explain the tested versions' reactive-update limitation; session overlays clarifies the primitive update callback. The other seven references and MIT notice are unchanged. This catalog copy adds source attribution and operational boundaries; it does not imply TradingView endorsement.

Recipes generate application code and can change dependencies. Follow the user's requested scope and the host's approval policy. Feed access belongs to the app's separately authorized adapter; keep credentials out of client code. Trade markers are visual annotations, not order execution or server-side alerts. Use synthetic data for local checks and report browser/feed behavior that remains untested.

Files

ATTRIBUTION.mdAdded by AutoGineer1.0 KiB
LICENSE1.0 KiB
SKILL.md10.1 KiB
references/history-and-range-selection.md11.5 KiB
references/hover-legends-and-tooltips.md8.1 KiB
references/market-data-and-live-updates.md11.9 KiB
references/numeric-axes-and-chart-types.md10.3 KiB
references/performance-comparison.md7.2 KiB
references/price-volume-and-indicators.md9.9 KiB
references/session-overlays-and-primitives.md10.1 KiB
references/synchronized-charts.md8.7 KiB
references/trade-markers-and-price-levels.md10.1 KiB

references/performance-comparison.md

Performance comparison

Use this when users want to compare several assets whose raw prices differ by orders of magnitude. A line at 200 and a line at 2 are rarely a useful performance comparison. Choose and name the comparison baseline before picking a scale mode.

Two meanings of percentage comparison

Product requirement	Data and scale	Consequence
Relative movement from the first visible value	Raw prices with `PriceScaleMode.Percentage`	Baseline can move when the viewport moves
Return since a fixed date or session open	Calculate returns upstream, plot on `PriceScaleMode.Normal`	Panning cannot change the meaning of the plotted return

The recipe below uses a fixed shared baseline. Do not apply percentage scale mode again to already-calculated returns. It would normalize data a second time and the starting zero is unsuitable as a percentage denominator.

Recipe: aligned, fixed-baseline return comparison

Each asset supplies ascending unique UTC-second prices on the desired calendar. Every value is finite; baseline prices must be positive. Inputs should use the same currency and adjustment policy when that matters to the requested comparison. This code displays price return, not total return including dividends.

Choose the earliest loaded timestamp present in all assets as the shared baseline. Keep later gaps as gaps; never invent a price by filling from a different date. For a contractual “since date X” requirement, have the adapter supply a common baseline observation at X or report the missing baseline instead of silently moving it. Mount with a stable dataset key so the initial fit corresponds to the completed snapshot.

import { useMemo, useState } from "react";
import { PriceScaleMode } from "lightweight-charts";
import type { LineData, UTCTimestamp } from "lightweight-charts";
import {
  Chart,
  LineSeries,
  Pane,
  TimeScale,
  TimeScaleFitContentTrigger,
} from "lightweight-charts-react-components";

export type Asset = {
  id: string;
  label: string;
  color: string;
  data: LineData<UTCTimestamp>[];
};

export function buildComparison(assets: Asset[]) {
  if (assets.length === 0) return null;
  const indexes = assets.map(
    asset => new Map(asset.data.map(point => [point.time, point.value]))
  );
  const baselineTime = assets[0].data.find(point =>
    indexes.every(index => index.has(point.time))
  )?.time;
  if (baselineTime === undefined) return null;

  const series = assets.map((asset, index) => {
    const baseline = indexes[index].get(baselineTime);
    if (baseline === undefined || !Number.isFinite(baseline) || baseline <= 0) {
      throw new Error(`Invalid baseline for ${asset.id}`);
    }
    const data = asset.data
      .filter(point => point.time >= baselineTime)
      .map(point => ({ time: point.time, value: (point.value / baseline - 1) * 100 }));
    return { ...asset, data };
  });
  return { baselineTime, series };
}

export function ReturnComparison({ assets }: { assets: Asset[] }) {
  const comparison = useMemo(() => buildComparison(assets), [assets]);
  const [hidden, setHidden] = useState<Set<string>>(() => new Set());
  if (!comparison) return <p>No common baseline observation</p>;
  const baselineLabel = new Date(comparison.baselineTime * 1000)
    .toISOString()
    .slice(0, 10);

  return (
    <section>
      <p>Price return since {baselineLabel} UTC</p>
      {comparison.series.map(asset => (
        <button
          key={asset.id}
          aria-pressed={!hidden.has(asset.id)}
          onClick={() =>
            setHidden(previous => {
              const next = new Set(previous);
              if (next.has(asset.id)) next.delete(asset.id);
              else next.add(asset.id);
              return next;
            })
          }
        >
          {asset.label}
        </button>
      ))}
      <Chart
        options={{ autoSize: true, rightPriceScale: { mode: PriceScaleMode.Normal } }}
        containerProps={{ style: { height: 360 } }}
      >
        <Pane>
          {comparison.series.map(asset => (
            <LineSeries
              key={asset.id}
              data={asset.data}
              options={{
                color: asset.color,
                visible: !hidden.has(asset.id),
                priceScaleId: "right",
                priceLineVisible: false,
                priceFormat: {
                  type: "custom",
                  minMove: 0.01,
                  formatter: (value: number) =>
                    `${value >= 0 ? "+" : ""}${value.toFixed(2)}%`,
                },
              }}
            />
          ))}
        </Pane>
        <TimeScale>
          {/* Toggling a comparison changes visibility, not its baseline or view. */}
          <TimeScaleFitContentTrigger deps={[comparison.baselineTime]} />
        </TimeScale>
      </Chart>
    </section>
  );
}

All lines share one price scale because the transformed values have the same unit. A stable series ID preserves the upstream series when labels change or input order changes. visible keeps series mounted; conditional mounting is also valid when removing the series is intended, but may change the shared timeline. Keeping a hidden series can retain its time positions in that timeline.

Adaptation boundaries

The earliest-common baseline is suitable for a complete, fixed initial snapshot. Prepending older history can change it. If the product promises a fixed baseline, store the chosen baseline time/prices in the application's comparison state and reuse them for subsequent snapshots; loading history must not redefine “return.” Likewise, toggling visibility must not recalculate the baseline from only the visible subset. The recipe always calculates across the full asset list.

If calendars differ, choose the intersection baseline explicitly and leave later missing observations absent or insert whitespace points on a shared calendar. Do not align by array index. Crosshair details should read each series' event entry and show — when it is missing; see hover details.

If the task is explicitly “percentage change relative to the currently visible window,” use raw price arrays and rightPriceScale.mode: PriceScaleMode.Percentage instead. Label this behavior because zooming and panning can change the displayed percentage baseline. Use separate axes or panes for metrics with different units.

Acceptance checks

At the shared baseline all assets equal 0%. A price moving from 100 to 110 yields +10%, and from 100 to 90 yields −10%.
Compare assets priced at 1 and 1000 with the same proportional movement. Their return lines coincide. Pan and verify the fixed values do not change.
Toggle one asset, change input ordering, and update a last price. IDs, colors, and the baseline retain their intended meaning.
Test no common time, missing observations, and an invalid baseline. Do not substitute zero or forward-fill a missing price without a product requirement.

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

ukorvl

Publisher

GitHub (Official)

Distributed by

GitHub

Source

github/awesome-copilot · skills/lightweight-charts-react-components · commit 797337f

Licence

MIT License (redistribution allowed)

ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-08

AutoGineer is not affiliated with or endorsed by ukorvl or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download lightweight-charts-react-components.zip