Interactive Drawing Tools Build Complete - Plugin Conversion Needed

[difurious]

I have a custom lightweight-charts build based off of v3.8 that lets you create interactive drawing tools on the chart. I call it the Line Tools build, project and video located here.

Tools that can be created are FibRetracement, ParallelChannel, HorizontalLine, VerticalLine, Highlighter, CrossLine, TrendLine, Rectangle, Triangle, Brush, Path, Text, Ray, Arrow, ExtendedLine, HorizontalRay, Circle, Callout, PriceRange

It works great and I need help from someone to update it to V4.x.x and if possible to a plugin. If you have the skill, this would make an awesome open source plugin for the community. Let me know if you want to take on this challenge.

[difurious]

just added Circle, Callout, PriceRange . Let me know if you want to help convert into Plugin.

[sydrock1204]

just added Circle, Callout, PriceRange . Let me know if you want to help convert into Plugin.

You are great. Please Know each other. @mihailflorin is my telegram id.
+381628645113 is my whatsapp
live:.cid.e13d554e3ea65c2c is my skype.

[tcnoff]

This is fantastic. Would love to see this implemented!

[brlocky]

Hi all !
I'm also looking for a toolset to use with lightweight charts, we developed some plugins like the Fibonacci retracement and projection tools, they work but need polish.
Anyways just to share some plugin examples

Would be interested also in Object Tree to manage the objects

https://github.com/brlocky/Elliott-UI/tree/main/src/components/Chart/plugins/fibonacci-drawing-tool

https://github.com/brlocky/Elliott-UI/tree/main/src/components/Chart/plugins/fibonacci-projection-tool

[TiS-QSP]

Hi @difurious, great work on your previous implementation BTW, thanks a lot. What is the status of this? Have you already created any plugins?

[difurious]

I have not converted it to plugins. Not sure if I will get to that. I am using it daily and works great. Downside is that it is on 3.8 of lightweight. Was hoping someone would use the tools as inspiration on what can be done and make plugins out of each tool. I imagined a plugin for core functionality, and individual plugins for each tool so you can mix and match. So anyone wanting to put in the final push to make this more future proof, let me know.

[KingOfFibonacci]

Just finding this now after wrestling with implementing my own. Thank you sir! Will let you know how implementing this goes into the current version...

[difurious]

im currently making it into a V5 plugin(s). Im maybe a month + out to having something. It going to be hopefully something people will help build new additional tools off of it.

[crypt0inf0]

Waiting for V5

[aaahariri]

@difurious Also working on a new project and very interested in v5. Happy to donate a bit too as a token of appreciation. Is there a way for us to subscribe to updates (Not that used to Github).

[KingOfFibonacci]

How we looking boys?

[bizzaretrading]

neat.

[crypt0inf0]

check out https://github.com/crypt0inf0/lightweight-charts-ui & demo available at https://crypt0inf0.github.io/lightweight-charts-demo/

All the drawing tools plugin available at https://github.com/crypt0inf0/lightweight-charts/tree/master/plugin-examples/src/plugins/line-tools
try ,

cd plugin-examples/src/plugins/line-tools

npm i

npm run build 

npm run dev

demo available at http://localhost:5173/src/plugins/line-tools/example/index.html

[difurious]

cool demo, your demo page seems to be ui only and no functional tools?. Is your line tools based on my v3.8? Im probably a week+ or so out on releasing my v5 conversion for the tools in my v3.8 build. Mine is lacking a ui to create the tools. I made a test frontend app to test all the tools functionality, but your gui would be an excellent addition to what im cooking. The core plugin is the nuts and bolts and you can add ala cart the individual line tools. I will let you know when its released

[crypt0inf0]

Yes i created my tools based on your tools and i use UI directly for smooth experience.

Added credit https://github.com/crypt0inf0/lightweight-charts-ui/blob/main/README.md#credit

[bizzaretrading]

this is really good. I had almost given up on light weight charts becuase the drawings won't extend into any future date (beyond what data is available on the chart). I was going to refactor my almost near ready product to use klinecharts library and today you drop this. I cannot thank you guys enough

[difurious]

Yes i created my tools based on your tools and i use UI directly for smooth experience.

Added credit https://github.com/crypt0inf0/lightweight-charts-ui/blob/main/README.md#credit

awesome, there is a chance my build will be done either in days, or delayed by a week + because of the holidays. But i imagine your ui being an addition to the "core" so it makes things easier to create the tools. eventually a ui to modify the options of the tools when you double click. my build is meant to be a drop in replacement to my existing trading tool as much as possible, so that is why i need to make the tool as similar as possible to v3.8 build. I will let you know when it is ready so you can see if it possible to make a "plugin" for my "core" to have it be like the ui for the tools.

[sasuke4ever]

@crypt0inf0 Your project is impressive, and the custom tools you've built are excellent. Would you consider creating a video tutorial on YouTube explaining your development process? A guide on how to build such tools would be incredibly helpful for me and other programmers looking to create our own.

[vishnuc]

why cant I drag drawings

[crypt0inf0]

which plugin are you using?

[vishnuc]

trendline , fibonacci etc

[bizzaretrading]

Feature Request: exportTools() / importTools() methods for LineToolManager
Summary
Add methods to serialize and deserialize all drawing tools managed by LineToolManager, enabling persistence across page reloads and symbol changes in multi-chart applications.

Use Case
I'm building a trading dashboard with multiple charts where users frequently switch between symbols. When switching symbols, I need to:

Save drawings for the current symbol
Restore drawings when the user switches back

Currently, I work around this by caching the actual tool primitives in memory and detaching/re-attaching them:

// On symbol change - cache tools
const tools = [...manager._tools];
symbolCache.set(prevSymbol, tools);
tools.forEach(t => series.detachPrimitive(t));
manager._tools.length = 0;

// On symbol return - restore tools
const cached = symbolCache.get(newSymbol);
cached.forEach(t => {
  series.attachPrimitive(t);
  manager._tools.push(t);
});
```
Problem: This only works within a single session. On page refresh, the in-memory cache is lost. Users lose all their drawings.

`// Export all tools as serializable JSON
const data = manager.exportTools();
// → [{ toolType: 'TrendLine', p1: {logical, price}, p2: {logical, price}, options: {...} }, ...]

localStorage.setItem('drawings', JSON.stringify(data));

// Later, restore tools
const saved = JSON.parse(localStorage.getItem('drawings'));
manager.importTools(saved);`


Why this matters
Drawing persistence is essential for trading applications. Users spend significant time annotating charts with trendlines, Fibonacci retracements, and support/resistance levels. Losing these on refresh creates a poor user experience.

Current Workarounds Attempted
In-memory cache - Works for session, lost on refresh
Accessing manager._tools - Can read primitives but can't recreate them from serialized data since tool constructors (TrendLine, Rectangle, etc.) aren't exported
Environment
lightweight-charts-ui version: [your version]
lightweight-charts version: [your version]
Browser: Chrome/Firefox/etc.
Thank you for this great library! The drawing tools, selection handles, and properties dialogs work beautifully. This feature would complete the persistence story. Happy to help test or contribute if you point me in the right direction.

[tedydonel]

Ohh, I didn't commit yet, tell me what you think?

[crypt0inf0]

Fork
https://github.com/crypt0inf0/lightweight-charts-ui and commit your changes so that we can see what improvements you made.

[tedydonel]

Yeah, I wanna make some more modifications before committing

[tedydonel]

@crypt0inf0 I forked it https://github.com/tedydonel/lightview

[crypt0inf0]

i will check it out

[difurious]

I'm out for the holidays for a week. I have the core and all tools created and tested only thing that could be better is the mouse pointer changing to different pointers conditionally. Just cosmetic. But my goal is a drop in replacement for the 3.8 build. I have a test app that tests all tools and option in a visual way so it gives examples on how everything works. The remaining thing is documentation and readme and upload to GitHub. So when I get back, hopefully less than a week to have V1 done. The core is set up to be like an api for the tools to use. So if someone wants to make their own tools it takes care of a lot of things. I don't imagine taking requests for new tools. But for you to use the core and make your own and release the tools for all to use.

[tedydonel]

What would it take to build a complete industry standard charting library like trading view from using the it's lightweight library?

[difurious]

my build of the line tools build converted into lightweight-charts V5+ plugins is done. Here is the link to the core plugin . The core is the brains and each line tool registers with the core. Make sure to read the whole readme. Here is a list of all the line tools that I have created.

Use the core to make your own line tool, but make sure to share it publicly with the community.

• TrendLine
• Ray
• Arrow
• ExtendedLine
• HorizontalLine
• HorizontalRay
• VerticalLine
• CrossLine
• Callout
• Brush
• Highlighter
• Rectangle
• Circle
• Triangle
• Path
• ParallelChannel
• FibRetracement
• PriceRange
• LongShortPosition
• Text
• MarketDepth

[sasuke4ever]

This is absolutely perfect—exactly what I’ve been looking for over the past two months! I can’t thank you enough.

[sasuke4ever]

@difurious Could you also create a tutorial on how to design custom drawing tools?

[difurious]

@difurious Could you also create a tutorial on how to design custom drawing tools?

The tutorial is in the source code. If you build it build docs for the api. you need to look at the source to find the notes on how things work. Im not doing more effort tutorial wise that what is already out there for you. feed the project to the AI and it will be able to answer any questions you want.

[difurious]

Great job! May I ask you to add one tool - time circles (it looks like semicircles). Thx a lot

Im not taking requests for tools. but the circle plugin is 99% what you need, just look at the draw method and instead of it drawing a full circle have it draw half a circle. And rename the tool to something else, then publish on git for all to use.

[jusacc]

Im not taking requests for tools. but the circle plugin is 99% what you need, just look at the draw method and instead of it drawing a full circle have it draw half a circle. And rename the tool to something else, then publish on git for all to use.

There is an important detail that the selected cycle period has an infinite continuation both forward and backward.. so I'm afraid it's unlikely that the drawing tool will work this way. Unfortunately, I'm not a developer in any way, so I won't be able to create this tool on my own. It remains to be hoped that someone from the community will do this. In any case.. Thank you for your work.

[SilentHG]

I am using the CDN js package, I am backend guy, any support for guys like me ? how do i integrate into my charts ? all i am seeing are .ts files, my stack isn't node. backend is python, frontend is good old Html+css+js

[difurious]

Im assuming you are not using the Old v3.8 build , but the new plugin version, this one #1466 (comment) . you need to build the source, it will make the dist folder, and will make .js files you can import into your frontend because its just javascript.