Build a Local Lightweight Charts React Line Chart with Codex
Create a browser-rendered line chart from a tiny static dataset. Check time ordering, compatibility, dimensions and the first rendered points with the Lightweight Charts React skill.
中文Setup for Codex
Use a React browser app with compatible React, React DOM, lightweight-charts-react-components and lightweight-charts versions. The example uses fixed numbers and requires no feed, account or market data.
- Copy the full pinned skills/lightweight-charts-react-components folder into .agents/skills in the React project. Open Codex and select $lightweight-charts-react-components.
- Check the installed dependency versions against the skill's compatibility guidance. If the chart packages are missing, add lightweight-charts-react-components and its lightweight-charts peer according to the project's package manager.
Example task
Render a 300-pixel-high line chart using these UTC-second data pairs: (1767225600,10), (1767312000,13), (1767398400,11). Use the wrapper's Chart and LineSeries and render only in the browser. Ask Codex to identify the high point and check the container height.Expected result
The chart plots three points in chronological order and peaks at 13 on the second day. The container has a nonzero height, and no live feed is requested or needed.
Upstream documentation
Original SKILL.md on GitHub · MIT license · Source reviewed
Frequently asked question
Why can a correctly configured Lightweight Charts component look blank?
Check that it mounts in the browser, the chart container has height, the package versions match, and time values are sorted and unique.