Lightweight Charts skills for agents
Lightweight Charts skills
Two TradingView skills: working with Lightweight Charts v5 without outdated v4 calls, and authoring your own plugins, custom series and primitives
- 17,715 ★ on the repository
- Last commit
- Apache-2.0
Minimal access
Why this level
- The skills only change the agent's instructions, while the agent writes and edits the chart code in your project
- The plugin skill suggests downloading sources from raw.githubusercontent.com and cloning the library repository into a temporary folder
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/lightweight-charts-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills only change the agent's instructions, while the agent writes and edits the chart code in your project
- The plugin skill suggests downloading sources from raw.githubusercontent.com and cloning the library repository into a temporary folder
This is third-party code. Review the repository files before installing.
What it does
The Lightweight Charts repository, TradingView's HTML5 canvas library for financial charts, holds two skills in the `.github/skills` folder. The `lightweight-charts` skill helps with the library itself: creating a chart, adding series (line, area, bar, candlestick, histogram), configuring time and price scales, streaming real-time data, panes, markers, tooltips and the React, Vue and Web Components wrappers. It first checks the version and typings of the installed package in `node_modules/lightweight-charts/dist/typings.d.ts` and answers only after that, and if the file is missing it says it could not verify. It checks method names against the typings and invents nothing. The skill's main device is a table that replaces version 4 code with version 5. Instead of `addLineSeries` and `addCandlestickSeries` the agent calls `chart.addSeries` with a series type, instead of `series.setMarkers` it uses `createSeriesMarkers`, and instead of the `watermark` option it uses `createTextWatermark`. It gives `UTCTimestamp` time in seconds, not milliseconds. If the user imports `lightweight_charts` with an underscore, the skill warns that this is a third-party Python package and withholds JavaScript advice. The second skill, `lightweight-charts-plugin-authoring`, is for people who write plugins. It helps choose the extension type (custom series, series primitive or pane primitive), proposes scaffolding with `npm create lwc-plugin@latest`, building on the `@tradingview/lwc-toolkit` package and taking the official plugins as reference. A separate list of traps covers autoscale, data gaps, the visible range and cursor hit testing.
Who it is for. For frontend developers who embed market and other time-series charts with Lightweight Charts, and for authors of plugins for the library.
Good fit when
- The agent writes chart code from old examples and calls `addLineSeries` while the project runs version 5
- You need a candlestick chart with volume on a separate pane, trade markers or a cursor tooltip
- Data arrives as a stream and you must update the last candle rather than overwrite the whole series
- You need a custom series type or a chart overlay, such as bands, stacked bars or a drawing tool
- The library is wired into React, Vue or a web component and the lifecycle has to be handled correctly
Not a fit when
- You need complex analytical charts, maps or relationship diagrams: the library draws financial and time series, and for general charting the catalog has the AntV chart MCP server
- The project is in Python: the skill points straight to the third-party `lightweight_charts` package and does not help with its code
- The library version is below 5 and you do not plan to upgrade: the skill leads to the version 5 API and does not mix in version 4 syntax
- You need ready market data and indicators: the library only draws the chart and you bring the data source yourself
Example request
Build a candlestick chart with Lightweight Charts v5, a volume histogram on a separate pane and last-candle updates from a WebSocketLimitations
- The skills are written for version 5 of the library. For version 4 and older code the agent replaces calls by the table instead of keeping them.
- The `lightweight-charts` skill relies on the package's local typings. Without an installed `lightweight-charts` or a `typings.d.ts` file the agent says it cannot verify method names.
- The hit-test hook for a custom series works only on version 5.2 and newer.
- The plugin skill suggests reading sample sources from GitHub over the network and, if you like, cloning the library repository with `git clone --depth 1`. The `create-lwc-plugin` wizard is interactive: it asks about type, name, package and license, and it is easier to run yourself.
- Apache-2.0 license.
How to disable. Delete the `lightweight-charts` and `lightweight-charts-plugin-authoring` folders from your agent's skills directory. The `lightweight-charts` library and the chart code in your project stay; `npm uninstall lightweight-charts` removes the library.
FAQ
How do I install the Lightweight Charts skills in Claude Code or Codex?
Run `npx skills add tradingview/lightweight-charts`. To take one of the two, add `--skill lightweight-charts` or `--skill lightweight-charts-plugin-authoring`. The README names Claude Code and Codex, and the two skills are designed to be installed together.
How does version 5 differ from version 4 in chart code?
Series are now created by one method, `chart.addSeries`, with an imported series type instead of `addLineSeries` and `addCandlestickSeries`. Markers go through `createSeriesMarkers`, watermarks through `createTextWatermark` and `createImageWatermark`, and series types are imported explicitly, which lets unused ones be dropped.
Why is the chart empty or broken with streaming data?
A common cause is time passed in milliseconds while `UTCTimestamp` expects seconds, or times that are not unique and ascending. For a stream the skill advises `series.update(point)` for the last point and no `setData` on every tick.
How do I choose between a custom series and a primitive?
The skill defaults to a primitive. A custom series is for when the idea is itself a series with its own data, autoscale and last-price label. A decoration of one series is a series primitive, and a pane decoration such as a watermark or legend is a pane primitive.
What does the skill say about time zones?
It does not use a `timezone` property on the time scale. For labels it recommends formatters built on `Intl.DateTimeFormat`, while the data itself stays in UTC time.
Discussion
No questions or reviews yet.
Related
SkillsThree.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
Preline UI skills for agents: assemble Tailwind CSS component interfaces and generate themes from tokens
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
A skill that designs UI and landing page mockups and rebuilds screenshots as HTML, a React project or a WeChat mini program
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Lightweight Charts skills for agents (this entry) | yes | 17,715 | ||
| MCP Server Chart | yes | not required | 4,406 | AntV's MCP server generates charts and diagrams of more than 25 types, from lines to maps |
| AntV Chart Visualization Skills | no | 516 | AntV skills for choosing a chart type and building it |
README in short
The library description holds a table of build files (module and standalone, development and production), a usage example and an AI coding assistants section with the install command for the two skills. The skill for using the library contains an eight-layer model, a task table with recommended calls and a list of documentation sources. The plugin skill is backed by three references: official plugins, the package contract and the toolkit.
README badge
Original SKILL.md
--- name: lightweight-charts 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. --- # Lightweight Charts skill Works 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. ## Source lookup order Do not assume you are inside the upstream source repository. 1. In a consumer app, inspect the installed package first: - `node_modules/lightweight-charts/package.json` for the actual version. - `node_modules/lightweight-charts/dist/typings.d.ts` for the API surface.