[{"_1":2,"_282":-5,"_283":-5},"loaderData",{"_3":4,"_8":9,"_23":24},"root",{"_5":-5,"_6":7},"user","countable",false,"routes/_main",{"_5":-5,"_10":11},"recentPosts",[12,17,20],{"_13":14,"_15":16},"slug","claude-code-agent-teams","title","What Claude Code's Agent Teams Feature Does",{"_13":18,"_15":19},"claude-code-goal-command","How Claude Code's /goal Command Works",{"_13":21,"_15":22},"claude-code-routines-vs-loop","Claude Code Routines vs /loop: What's the Difference?","routes/creators.$handle",{"_25":26,"_27":26,"_28":29,"_30":7,"_31":32,"_280":7,"_281":109},"handle","tradingview","displayName","profileUrl","https://github.com/tradingview","verified","skills",[33],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_54":55,"_59":60,"_61":62,"_63":64,"_79":80,"_81":-5,"_82":83,"_84":85,"_86":87,"_88":89,"_90":91,"_92":-5,"_93":94,"_95":26,"_30":7,"_96":7,"_97":85,"_98":99,"_100":85,"_101":85,"_102":103,"_104":105,"_135":136,"_172":173,"_223":224,"_252":253,"_264":265,"_276":277,"_278":279},"id","gh__tradingview__lightweight-charts__github-skills-lightweight-charts","lightweight-charts-tradingview","name","Lightweight Charts","canonicalName","lightweight-charts","tagline","Simplify chart creation with TradingView's lightweight library.","description","Use when working with TradingView's lightweight-charts — creating charts, adding series (Line/Area/Bar/Candlestick/Histogram), configuring time and price scales, streaming realtime or historical data, panes, markers, per-bar/per-point colors, tooltips, coordinate conversion, custom plugins or primitives, non-financial horizontal scales, SSR/browser loading, or React/Vue/Web Components wrappers. Covers v5 API conventions and the common time, scale, marker, plugin, and wrapper foot-guns.","longDescription","Lightweight Charts is a skill designed for developers and designers working with TradingView's lightweight-charts library. This skill streamlines the process of creating interactive charts, allowing users to add various series types such as Line, Area, Bar, Candlestick, and Histogram. It provides a structured approach to configuring time and price scales, managing real-time or historical data, and customizing chart features like panes, markers, and tooltips. It is particularly useful for those who need to implement complex charting solutions in their applications.\n\nThe skill operates seamlessly whether you are working on a consumer app that utilizes the lightweight-charts package or directly within the upstream source repository. It intelligently detects your environment and resolves API names based on the available typings, ensuring that you have access to the most accurate and relevant information. This feature is crucial for avoiding common pitfalls associated with version discrepancies or outdated syntax, especially when transitioning from older versions of the library.\n\nIn addition to basic chart creation, the skill covers advanced features such as custom plugins, coordinate conversions, and the handling of non-financial horizontal scales. It adheres to the v5 API conventions, which include important changes that users must be aware of to avoid errors. By utilizing this skill, users can efficiently manage the intricacies of charting while focusing on their core application development tasks.\n\nThis skill is ideal for frontend developers and data visualization specialists who require a robust solution for integrating charts into their applications. Whether you are building dashboards, financial applications, or any project that requires data visualization, Lightweight Charts provides the tools necessary to create professional-grade charts with minimal effort.","primaryCategory","development","subcategory","frontend","secondaryCategories",[53],"data","tags",[26,56,57,58,50],"charts","data-visualization","javascript","skillType","tool-wrapper","complexity","intermediate","platforms",[65,66,67,68,69,70,71,72,73,74,75,76,77,78],"claude-code","claude-api","codex-cli","cursor","antigravity","github-copilot","windsurf","opencode","cline","roo-code","goose","kiro","continue","trae","delivery","source-link","skillFileUrl","pricing","free","price",0,"thumbnailType","icon","thumbnailIcon","chart-bar","thumbnailColor","blue","thumbnailImageUrl","sellerId","gh__tradingview","sellerName","featured","downloads","views",3,"rating","reviewCount","status","active","metrics",{"_106":107,"_108":109,"_110":109,"_111":112,"_113":114,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134},"freshnessScore",100,"mirrorCount",1,"skillCountInRepo","qualityScore",85,"daysSinceUpdate",5,"popularityScore",87,"trustScore",65,"repoOpenIssues",126,"repoStars",16924,"repoWatchers",198,"repoContributors",67,"overallScore",84,"repoCreatedAt","2019-05-24T14:41:49Z","repoForks",2564,"repoPushedAt","2026-08-05T09:00:24Z","source",{"_137":26,"_138":139,"_140":141,"_146":147,"_148":40,"_149":-5,"_144":150,"_151":152,"_153":147,"_154":7,"_155":156,"_157":158,"_164":165,"_166":167,"_168":169,"_170":171},"owner","repoUrl","https://github.com/tradingview/lightweight-charts","author",{"_28":29,"_142":143,"_37":26,"_25":26,"_144":145},"avatarUrl","https://github.com/tradingview.png","type","User","lastSyncedAt","2026-08-11T01:29:59.486Z","repo","commitSha","github","branch","master","firstSeenAt","isOfficial","path",".github/skills/lightweight-charts","license",{"_37":159,"_160":161,"_162":163},"Apache License 2.0","spdxId","Apache-2.0","url","https://github.com/tradingview/lightweight-charts/blob/master/LICENSE","sourceUpdatedAt","2026-08-05T08:56:53.000Z","redistributable",true,"permalink","https://github.com/tradingview/lightweight-charts/blob/master/.github/skills/lightweight-charts/SKILL.md","repoFullName","tradingview/lightweight-charts","seo",{"_174":175,"_186":187,"_188":189,"_207":-5,"_208":209,"_215":216,"_217":218,"_219":220,"_221":222},"useCases",[176,180,183],{"_15":177,"_178":179},"Creating a Financial Dashboard","body","Utilize the skill to implement interactive financial charts that display stock prices, trends, and historical data.",{"_15":181,"_178":182},"Real-time Data Visualization","Leverage the skill's capabilities to update charts in real-time, perfect for applications that require live data feeds.",{"_15":184,"_178":185},"Integrating with Web Frameworks","Use the skill to easily integrate lightweight-charts into React or Vue applications, enhancing your UI with powerful data visualizations.","whenNotToUse","This skill is not suitable for users working with the Python wrapper for lightweight-charts or those needing basic charting without advanced features.","faqs",[190,195,198,201,204],{"_191":192,"_193":194},"q","What types of charts can I create with this skill?","a","You can create various types of charts including Line, Area, Bar, Candlestick, and Histogram using the lightweight-charts library.",{"_191":196,"_193":197},"How does this skill handle different environments?","The skill detects whether you are in a consumer app or the upstream source repository and resolves API names accordingly.",{"_191":199,"_193":200},"What are the key changes in v5 of lightweight-charts?","Key v5 changes include the use of `chart.addSeries(SeriesType, options)` for series creation and `createSeriesMarkers(series, markers)` for markers.",{"_191":202,"_193":203},"Can I use this skill for real-time data updates?","Yes, the skill supports real-time data updates through the `series.update(point)` method, allowing you to efficiently manage live data.",{"_191":205,"_193":206},"Is this skill compatible with React or Vue?","Yes, the skill provides guidance on integrating lightweight-charts with React, Vue, and other web component frameworks.","ogImageUrl","keywords",[210,211,212,213,214],"lightweight charts","tradingview charts","javascript charting","data visualization","frontend charts","whenToUse","Use this skill when you need to create interactive charts in JavaScript applications, particularly when working with TradingView's lightweight-charts library.","metaTitle","Lightweight Charts - TradingView Charting Tool","problemSolved","This skill removes the complexity of integrating and using TradingView's lightweight-charts library, especially for those unfamiliar with its API.","metaDescription","Use Lightweight Charts for easy integration of TradingView's charting library in your projects.","content",{"_225":85,"_226":227,"_235":236,"_246":247,"_248":7,"_249":250,"_251":231},"bundledFiles","fileTree",[228],{"_155":229,"_230":231,"_144":232,"_233":234},"SKILL.md","size",27644,"file","language","markdown","codeExamples",[237,241,244],{"_233":238,"_239":240},"sh","snippet","node -p \"require('./node_modules/lightweight-charts/package.json').version\"\nrg -n \"createSeriesMarkers|addSeries|IPrimitivePaneRenderer|createImageWatermark|createOptionsChart\" node_modules/lightweight-charts/dist/typings.d.ts\n# upstream checkout instead of a consumer app:\nrg -n \"createSeriesMarkers|IPrimitivePaneRenderer|createImageWatermark|createOptionsChart\" dist/typings.d.ts src",{"_233":242,"_239":243},"ts","import { createChart, CandlestickSeries, LineSeries } from 'lightweight-charts';\n\nconst chart = createChart(container, { /* ChartOptions */ });\nconst candles = chart.addSeries(CandlestickSeries, { /* options */ });\ncandles.setData([\n { time: 1700000000, open: 1, high: 2, low: 0.5, close: 1.5 },\n]);",{"_233":242,"_239":245},"import { createChart, CandlestickSeries } from 'lightweight-charts';\n\nconst chart = createChart(container, {});\nconst series = chart.addSeries(CandlestickSeries, {});\nseries.setData(initialBars); // full history once\n\nws.onmessage = ev => {\n const bar = JSON.parse(ev.data); // { time, open, high, low, close }\n series.update(bar); // appends if time > last; replaces if time === last\n};","skillMd","# Lightweight Charts skill\n\nWorks the same whether the project is a downstream npm consumer app or an upstream `lightweight-charts` source checkout. Detect which one you are in (below) and resolve every API name from whatever typings are locally available.\n\n## Source lookup order\n\nDo not assume you are inside the upstream source repository.\n\n1. In a consumer app, inspect the installed package first:\n - `node_modules/lightweight-charts/package.json` for the actual version.\n - `node_modules/lightweight-charts/dist/typings.d.ts` for the API surface.\n2. In the upstream repo, inspect `dist/typings.d.ts` first, then `src/` if generated output is unavailable.\n3. Use official docs/examples as supporting evidence, but local typings win when they disagree.\n\nVerify before answering (copy-paste):\n\n```sh\nnode -p \"require('./node_modules/lightweight-charts/package.json').version\"\nrg -n \"createSeriesMarkers|addSeries|IPrimitivePaneRenderer|createImageWatermark|createOptionsChart\" node_modules/lightweight-charts/dist/typings.d.ts\n# upstream checkout instead of a consumer app:\nrg -n \"createSeriesMarkers|IPrimitivePaneRenderer|createImageWatermark|createOptionsChart\" dist/typings.d.ts src\n```\n\nIf the relevant file is unavailable, say what could not be verified. Do not invent option names, methods, exports, or wrapper behavior.\n\nIf the user's code imports `from lightweight_charts import ...` (underscore), uses pandas/asyncio, or talks about a Python window wrapper, they are probably using the third-party Python wrapper rather than the TypeScript package. Say that clearly before giving core `lightweight-charts` v5 JavaScript advice.\n\n## Mental model\n\nEight layers, in dependency order. Most bugs come from confusing one for another:\n\n1. **Chart** — `createChart(container, options)` returns an `IChartApi`. One chart per container element.\n2. **Series** — added via `chart.addSeries(SeriesType, options, paneIndex?)`. Each call returns an `ISeriesApi`. v5 requires importing the series type explicitly.\n3. **Scales** — `chart.timeScale()` (`ITimeScaleApi`), `chart.priceScale(id)` (`IPriceScaleApi`). Govern range, ticks, autoscale, visibility.\n4. **Data model** — arrays of `{ time, … }` points. `Time = UTCTimestamp | BusinessDay | string`. `UTCTimestamp` is **seconds**, not milliseconds. Times must be unique and ascending per series.\n5. **Interaction** — `chart.subscribeCrosshairMove`, `chart.subscribeClick`, `timeScale.subscribeVisibleLogicalRangeChange`, etc.\n6. **Layout** — `chart.panes()`, `chart.addPane()`. Adding a series with an out-of-range `paneIndex` auto-creates the pane.\n7. **Extension** — pane primitives, series primitives, custom series, watermarks, custom renderers (canvas via `fancy-canvas`).\n8. **Wrappers** — React/Vue/Web Components/iOS/Android. Lifecycle is the wrapper's responsibility; the core library is framework-agnostic.\n\n## v5 essentials\n\nThe conventions that catch people copying older snippets:\n\n```ts\nimport { createChart, CandlestickSeries, LineSeries } from 'lightweight-charts';\n\nconst chart = createChart(container, { /* ChartOptions */ });\nconst candles = chart.addSeries(CandlestickSeries, { /* options */ });\ncandles.setData([\n { time: 1700000000, open: 1, high: 2, low: 0.5, close: 1.5 },\n]);\n```\n\nKey v5 changes versus older snippets:\n\n- `chart.addSeries(SeriesType, options, paneIndex?)` replaces `addLineSeries` / `addCandlestickSeries` / …\n- `createSeriesMarkers(series, markers)` replaces `series.setMarkers(...)`. The returned primitive owns `.setMarkers(...)` / `.markers()`.\n- `createTextWatermark(pane, options)` and `createImageWatermark(pane, imageUrl, options)` replace the `watermark` chart option.\n- Series types are tree-shaken — importing them is required for ESM.\n\nIf a snippet calls `addLineSeries` or `series.setMarkers`, it's v4 or older. Confirm the user's version before forwarding it.\n\nWhen the task targets v5, show the v5 API directly — do not hedge by mixing in v4 syntax.\n\n## Triage (problem → API → avoid)\n\n| User asks about | First check | Answer with | Avoid |\n|---|---|---|---|\n| v5 series creation | package version + typings | `chart.addSeries(SeriesType, options)` | `addLineSeries` / `addCandlestickSeries` |\n| markers | `createSeriesMarkers` export | marker primitive + required `color` | `series.setMarkers` |\n| timezone | formatter need vs data semantics | `Intl.DateTimeFormat` in formatters | fake `timeScale.timezone` |\n| realtime updates | last-bar vs full replace | `series.update(point)` | `setData` on every tick |\n| panes | `paneIndex` + `chart.panes()` | v5 pane APIs, `pane.setHeight` | private widget / DOM hacks |\n| per-bar colors | data-point color fields | `color`/`borderColor`/`wickColor` on points | extra series / markers to recolor |\n| plugins | primitive vs custom series | scaffold/examples + public coordinate APIs | invented renderer names |\n\n### v4 → v5 replacement matrix\n\nStale copy-pasted snippets are the most common failure. Map them directly:\n\n| Old or wrong | v5 replacement |\n|---|---|\n| `chart.addLineSeries(options)` | `chart.addSeries(LineSeries, options)` |\n| `chart.addCandlestickSeries(options)` | `chart.addSeries(CandlestickSeries, options)` |\n| `series.setMarkers(markers)` | `createSeriesMarkers(series, markers)` |\n| chart `watermark` option | `createTextWatermark(chart.panes()[0], options)` |\n| `createImageWatermark(pane, options)` | `createImageWatermark(pane, imageUrl, options)` |\n| `IPanePrimitivePaneRenderer` | `IPrimitivePaneRenderer` |\n| `timeScale: { timezone }` | label formatters using `Intl.DateTimeFormat` |\n| `time: Date.now()` (ms) | `time: Math.floor(Date.now() / 1000)` for `UTCTimestamp` |\n\n## Routing map (problem → where to look)\n\nUse local typings first. The repo paths below exist only in the upstream `lightweight-charts` checkout; in a consumer app, translate them to the installed package typings or official docs.\n\n| Task | Canonical sources |\n|---|---|\n| First chart / series | `website/docs/intro.mdx`, `website/tutorials/customization/` |\n| Time / range behavior | `website/docs/time-scale.md`, `website/docs/time-zones.md` |\n| Realtime / history | `website/tutorials/demos/realtime-updates.{mdx,js}`, `website/tutorials/demos/infinite-history.{mdx,js}` |\n| Whitespace / gaps | `website/tutorials/demos/whitespace.{mdx,js}` |\n| Price format / locale | `website/tutorials/customization/price-format.mdx`, `website/tutorials/demos/custom-locale.{mdx,js}` |\n| Two scales / inverted | `website/tutorials/how_to/two-price-scales.{mdx,js}`, `website/tutorials/how_to/inverted-price-scale.{mdx,js}` |\n| Panes / price + volume | `website/docs/panes.md`, `website/tutorials/how_to/panes.{mdx,js}`, `website/tutorials/how_to/price-and-volume.{mdx,js}` |\n| Markers / tooltips / legends | `website/tutorials/how_to/series-markers.{mdx,js}`, `website/tutorials/how_to/tooltips.mdx`, `website/tutorials/how_to/legends.mdx` |\n| Crosshair (programmatic) | `website/tutorials/how_to/set-crosshair-position*.js` |\n| Watermarks | `website/tutorials/how_to/watermark.mdx` |\n| Plugins / custom series / primitives | `website/docs/plugins/`, `plugin-examples/src/plugins/` |\n| Coordinate conversion / hit-testing | `dist/typings.d.ts` for `subscribeClick`, `coordinateToPrice`, `timeScale().coordinateToLogical` |\n| Non-time horizontal scales / options chart | `dist/typings.d.ts` for `createOptionsChart`, `createChartEx`, `IHorzScaleBehavior` |\n| Pixel-perfect rendering | `website/docs/plugins/pixel-perfect-rendering/` |\n| React / Vue / Web Components | `website/tutorials/react/`, `website/tutorials/vuejs/`, `website/tutorials/webcomponents/` |\n| SSR / script loading / bundlers | installed package `dist/` files, package `exports`, framework docs for client-only components |\n| iOS / Android wrappers | `website/docs/ios.md`, `website/docs/android.md` |\n| Version migration | `website/docs/migrations/from-v2-to-v3.md`, `from-v3-to-v4.md`, `from-v4-to-v5.md` |\n\nIf these repo paths do not exist in the user's project, do not ask them to create or clone the source tree just to answer a normal usage question. Use `node_modules/lightweight-charts/dist/typings.d.ts` and concise v5 examples.\n\n## Foot-guns (assertions, not categories)\n\n### Time\n\n- **`UTCTimestamp` is in seconds.** Use `Math.floor(Date.now() / 1000)`, never `Date.now()`.\n- **There is no built-in `timeScale.timezone` option.** For display-only timezone conversion, use `timeScale.tickMarkFormatter` for axis labels and `localization.timeFormatter` (or your own tooltip formatter) for crosshair/hover labels. Use `Intl.DateTimeFormat(..., { timeZone })`, Luxon, or date-fns-tz for DST-safe IANA timezone formatting.\n- **Pre-shifting timestamps changes chart semantics.** It can make ticks line up in a chosen timezone, but it also changes where bars sit on the UTC time scale. Prefer formatter-based display unless the user intentionally wants shifted data.\n- **Series data must be strictly ascending by `time`, with unique values.** Duplicates replace silently; out-of-order points are dropped or throw.\n- **One time format per series.** `BusinessDay` (`'YYYY-MM-DD'` string or `{ year, month, day }`) or `UTCTimestamp`, but do not mix within a single series.\n- **Whitespace points carry `time` only** (no `value` / `open` / …). Use them to create gaps or align overlays; do not set values to `null`.\n- **`setData` replaces the dataset and can reset the visible range. `update(point)` appends if `time > last` and replaces if `time === last`.** `update(point, true)` can update an existing historical point, but it is slower and does not insert missing old points. To prepend older history, build a new array and call `setData` again — there is no prepend method; save and restore the visible logical range to avoid the chart snapping.\n- **`timeScale.setVisibleLogicalRange` is logical (bar indices), not time-based.** Use `setVisibleRange` for time bounds, or `fitContent()` to reset.\n\n### Scales and panes\n\n- **Two visible price scales** requires both assigning series with `priceScaleId: 'right'` / `'left'` and making the left scale visible. Use `chart.applyOptions({ leftPriceScale: { visible: true }, rightPriceScale: { visible: true } })` or `chart.priceScale('left').applyOptions({ visible: true })`.\n- **Overlay series** (`priceScaleId: ''` or any custom id) get an autoscaled, hidden scale by default. Make it visible explicitly if you want axis labels.\n- **`autoscaleInfoProvider` runs on every layout pass.** Keep it cheap; do not allocate per call.\n- **`addSeries(_, _, paneIndex)` creates the pane** if `paneIndex` is one past the current count. Pane order is creation order; sizes are controlled via `chart.panes()[i].setHeight(px)`.\n- **Keep pane references if panes can move.** `const mainPane = chart.panes()[0]` remains the same `IPaneApi`; `mainPane.paneIndex()` gives its current index after `swapPanes` or moves.\n- **Sync separate charts with public time-scale events.** Use `subscribeVisibleLogicalRangeChange` and `setVisibleLogicalRange`; avoid `_private__chartWidget`, `paneWidgets`, or DOM offset hacks.\n- **Price-scale width is readable, not directly settable.** Use `series.priceScale().width()` or `chart.priceScale(id).width()` to measure when aligning adjacent containers.\n\n### Markers and interaction\n\n- **v5 markers are a primitive.** `const m = createSeriesMarkers(series, [...]); m.setMarkers([...])`. `series.setMarkers` does not exist on `ISeriesApi` in v5.\n- **Marker `time` must match an existing data point's `time`** for that series. Misaligned markers are dropped silently.\n- **`subscribeCrosshairMove`** fires with `param.time === undefined` outside the data range. Always null-check before reading.\n- **`param.seriesData.get(series)`** returns `undefined` between bars or before the first bar.\n- **Click/crosshair coordinates need API conversion.** Use `series.coordinateToPrice(y)` / `series.priceToCoordinate(price)` and `chart.timeScale().coordinateToLogical(x)` / `logicalToCoordinate(logical)` / `timeToCoordinate(time)`; do not infer price/time from canvas DOM geometry.\n\n### Plugins and custom rendering\n\n- **Start plugins from the scaffold/examples.** Prefer `npm create lwc-plugin@latest` and `plugin-examples/` before writing a primitive from scratch.\n- **Interactive drawing tools need two parts:** a primitive/custom series for rendering, and chart interaction handlers (`subscribeClick`, `subscribeCrosshairMove`, drag state) that convert coordinates with public APIs.\n- **`CanvasRenderingTarget2D` is imported from `fancy-canvas`,** not from `lightweight-charts`.\n- Use `target.useBitmapCoordinateSpace(scope => …)` for pixel-aligned strokes; use `target.useMediaCoordinateSpace(scope => …)` for CSS-pixel logic. Mixing them causes blur or sub-pixel jitter on HiDPI displays.\n- **`IPanePrimitive` views render across the whole pane; `ISeriesPrimitive` views are clipped to the series.** Pick the right base.\n- **The renderer interface is `IPrimitivePaneRenderer`, not `IPanePrimitivePaneRenderer`.** The view is `IPanePrimitivePaneView` and its `renderer()` returns `IPrimitivePaneRenderer | null` — the names are deliberately asymmetric. There is no `IPanePrimitivePaneRenderer` export; grep `dist/typings.d.ts` if unsure.\n- **`ICustomSeriesPaneView` is heavier than a primitive** — only use it when you need a true series API (data, scales, autoscale). For decorations, use a primitive.\n\n### Wrappers (React/Vue/etc.)\n\n- **Create the chart once** in `useEffect` / `onMounted` and destroy it in cleanup with `chart.remove()`. Recreating on every render duplicates DOM and leaks listeners.\n- **Resize can be automatic in v5** with `autoSize: true` when `ResizeObserver` is available. If you need manual control, subscribe a `ResizeObserver` to the container and call `chart.resize(width, height)` (or `applyOptions({ width, height })`).\n- **Don't drive `setData` from props on every render.** Use `series.update(...)` for incremental changes; only call `setData` when the dataset truly replaces.\n- **Next.js/SSR must be client-only.** Put chart code in a `'use client'` component, create it in `useEffect`, and import that component with `next/dynamic(..., { ssr: false })` from server-rendered pages when needed.\n- **Plain HTML is not npm resolution.** The standalone `.js` build exposes `window.LightweightCharts`; ESM in the browser must import an actual `.mjs` URL or use an import map. `import { createChart } from 'lightweight-charts'` only works when a bundler/runtime resolves the package name.\n\n## Canonical recipes\n\n### Realtime updates\n\n```ts\nimport { createChart, CandlestickSeries } from 'lightweight-charts';\n\nconst chart = createChart(container, {});\nconst series = chart.addSeries(CandlestickSeries, {});\nseries.setData(initialBars); // full history once\n\nws.onmessage = ev => {\n const bar = JSON.parse(ev.data); // { time, open, high, low, close }\n series.update(bar); // appends if time > last; replaces if time === last\n};\n```\n\n`update()` only handles the latest bar. To insert in the middle or prepend, rebuild the array and call `setData`.\n\n### Two price scales (left + right)\n\n```ts\nconst right = chart.addSeries(LineSeries, { priceScaleId: 'right' });\nconst left = chart.addSeries(LineSeries, { priceScaleId: 'left' });\nchart.applyOptions({\n leftPriceScale: { visible: true },\n rightPriceScale: { visible: true },\n});\n```\n\n### Volume in its own pane\n\n```ts\nconst price = chart.addSeries(CandlestickSeries, {}, 0);\nconst volume = chart.addSeries(\n HistogramSeries,\n { priceFormat: { type: 'volume' } },\n 1,\n);\nchart.panes()[1].setHeight(120);\n```\n\n### Per-bar / per-point colors\n\nColor individual bars by putting the color on the **data point**, not via a separate API:\n\n```ts\n// Candlesticks: per-point color / borderColor / wickColor override series defaults\ncandles.setData([\n { time: 1700000000, open: 1, high: 2, low: 0.5, close: 1.5,\n color: '#26a69a', borderColor: '#26a69a', wickColor: '#26a69a' },\n { time: 1700003600, open: 1.5, high: 1.8, low: 1.1, close: 1.2,\n color: '#ef5350', borderColor: '#ef5350', wickColor: '#ef5350' },\n]);\n\n// Histogram (e.g. up/down volume): per-point color\nvolume.setData([\n { time: 1700000000, value: 100, color: 'rgba(38,166,154,0.5)' },\n { time: 1700003600, value: 80, color: 'rgba(239,83,80,0.5)' },\n]);\n```\n\nLine/Area points also take a per-point `color`. An omitted point color falls back to the series option. Do not create extra series or use markers to recolor bars.\n\n### Series markers\n\n```ts\nimport { createSeriesMarkers } from 'lightweight-charts';\n\nconst markers = createSeriesMarkers(candles, [\n { time: 1700000000, position: 'aboveBar', color: '#e53935', shape: 'arrowDown', text: 'Sell' },\n]);\n\nmarkers.setMarkers([\n { time: 1700003600, position: 'belowBar', color: '#43a047', shape: 'arrowUp', text: 'Buy' },\n]);\n```\n\n`color` is required on every marker (`position`, `shape`, `time` too); `text`, `size`, `id`, `price` are optional. Do not put marker objects into `setData()` points. Do not call `series.setMarkers(...)` in v5.\n\n### Timezone display\n\n```ts\nconst zone = 'America/New_York';\nconst formatTime = (timestamp: number) =>\n new Intl.DateTimeFormat('en-US', {\n timeZone: zone,\n hour: '2-digit',\n minute: '2-digit',\n second: '2-digit',\n hour12: false,\n }).format(new Date(timestamp * 1000));\n\nchart.applyOptions({\n timeScale: {\n timeVisible: true,\n secondsVisible: true,\n tickMarkFormatter: (time) =>\n typeof time === 'number' ? formatTime(time) : String(time),\n },\n localization: {\n timeFormatter: (time) =>\n typeof time === 'number' ? formatTime(time) : String(time),\n },\n});\n```\n\nDo not invent `timeScale: { timezone: 'America/New_York' }`. If the user needs exchange-session boundaries to generate in a local timezone, explain the trade-off of shifting source timestamps separately from display formatting.\n\n### Text watermark\n\n```ts\nimport { createTextWatermark } from 'lightweight-charts';\n\ncreateTextWatermark(chart.panes()[0], {\n horzAlign: 'center',\n vertAlign: 'center',\n lines: [{ text: 'DEMO', color: 'rgba(0, 0, 0, 0.25)', fontSize: 48 }],\n});\n```\n\nThe old `watermark` chart option is not the v5 API.\n\n### Whitespace gaps\n\n```ts\nline.setData([\n { time: '2024-01-01', value: 10 },\n { time: '2024-01-02' }, // whitespace point: time only\n { time: '2024-01-03', value: 12 },\n]);\n```\n\nDo not use `value: null`, `undefined`, or `NaN` to create gaps.\n\n### Sync separate charts or panes\n\n```ts\nlet syncing = false;\n\npriceChart.timeScale().subscribeVisibleLogicalRangeChange((range) => {\n if (!range || syncing) return;\n syncing = true;\n indicatorChart.timeScale().setVisibleLogicalRange(range);\n syncing = false;\n});\n\nindicatorChart.timeScale().subscribeVisibleLogicalRangeChange((range) => {\n if (!range || syncing) return;\n syncing = true;\n priceChart.timeScale().setVisibleLogicalRange(range);\n syncing = false;\n});\n```\n\nFor v5 panes inside one chart, prefer `chart.addSeries(SeriesType, options, paneIndex)` and `chart.panes()[i].setHeight(px)`. If the original pane can move, keep the `IPaneApi` reference and call `pane.paneIndex()` instead of assuming index `0` forever.\n\n### Coordinate conversion\n\n```ts\nchart.subscribeClick((param) => {\n if (!param.point || param.time === undefined) return;\n\n const price = series.coordinateToPrice(param.point.y);\n const logical = chart.timeScale().coordinateToLogical(param.point.x);\n if (price === null || logical === null) return;\n\n // Store { time: param.time, price } or convert logical back later:\n const x = chart.timeScale().logicalToCoordinate(logical);\n const y = series.priceToCoordinate(price);\n});\n```\n\nUse the public conversion APIs for drawing tools and annotations. DOM canvas coordinates alone cannot tell you the chart price/time.\n\n### Next.js client-only component\n\n```tsx\n'use client';\n\nimport { createChart, LineSeries } from 'lightweight-charts';\nimport type { ISeriesApi, LineData, Time } from 'lightweight-charts';\nimport { useEffect, useRef } from 'react';\n\nexport function LwcChart({ data }: { data: LineData[] }) {\n const ref = useRef(null);\n const seriesRef = useRef | null>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n const chart = createChart(ref.current, { autoSize: true });\n const series = chart.addSeries(LineSeries);\n seriesRef.current = series;\n return () => {\n seriesRef.current = null;\n chart.remove();\n };\n }, []);\n\n useEffect(() => {\n seriesRef.current?.setData(data);\n }, [data]);\n\n return

;\n}\n```\n\nFrom a server-rendered Next.js page, import the component with:\n\n```tsx\nimport dynamic from 'next/dynamic';\n\nconst LwcChart = dynamic(() => import('./LwcChart').then((m) => m.LwcChart), {\n ssr: false,\n});\n```\n\n### Plain HTML loading\n\nUse the standalone IIFE build when there is no bundler:\n\n```html\n

\n\n\n```\n\nChoose the loading shape by environment:\n\n- **Bundler (Vite/webpack/Next):** bare `import { createChart } from 'lightweight-charts'`. The package `exports` resolve the right ESM/CJS build.\n- **Browser `