Update createPriceLine Option to allow for HTML markers

[karunkrishna]

Include the following options:

1. lineWidth: {px or %} the length the priceLine spans to the left
2. htmlBody: and HTML definable string so the end-user can create their own markers relative to the priceLine

I'm interested in creating the use-case below

[timocov]

lineWidth: {px or %} the length the priceLine spans to the left

What's about providing the last time when this line should be displayed? I just want to note that there might be several approaches and I'm not sure which one is better here (but I'm 99% sure that providing px here is bad idea because of 100px has different meaning for 1000px and 2000px charts).

htmlBody: and HTML definable string so the end-user can create their own markers relative to the priceLine

We can easily put text at top/bottom of the line, but I'm not sure about providing ability to put HTML element here. Moving that element on every update could cause performance issues and we need to be really careful here.

[karunkrishna]

(but I'm 99% sure that providing px here is bad idea because of 100px has different meaning for 1000px and 2000px charts).

You're right providing px is bad idea. My suggestion would be to default a percentage for this enhancement. I believe this would cover most cases for ppl using the priceLine for Support/Resistnace, Entry/Exit and Alert Lines

If we use a timestamp based on your proposal, I'm concerned on how the line might become really short if you zoom-out; and very long when you zoom-in to price. By having a percentage of the visible window, the line would be fixed to a particular viewing area

Though I do like the timestamp idea. As you can eventually expand it to include a Start and End Timestamp and Price to draw Trendlines and channels...maybe a feature down the road :)

We can easily put text at top/bottom of the line....Moving that element on every update could cause performance issues

This makes sense. If these priceLines (alerts lines) are being generated by a strategy, probably a good option to be able to supply at-least a string top-left justified so end-user can identify what the priceLine signifies.

I'm thinking left-justified but contained in the width of the line (like below); My reasoning, is so that text does not overlap or crowd the right-hand-side of the chart where the current bar is rendering

[timocov]

I'm concerned on how the line might become really short if you zoom-out; and very long when you zoom-in to price

Yeah, agree. But it allows show where that alert/order was created :) Just as an example.

As you can eventually expand it to include a Start and End Timestamp and Price to draw Trendlines and channels...maybe a feature down the road :)

Oh... For that purposes you can create series with 2 points instead 🙂

a string top-left justified so end-user can identify what the priceLine signifies.

What's about labels we already have like in example https://jsfiddle.net/TradingView/4pd5j8xa/ ?

text does not overlap or crowd the right-hand-side of the chart where the current bar is rendering

But it could be happened anyway, it depends of many factors like window's width, text length, font size, current right margin and bar spacing and so on...

[karunkrishna]

Yeah, agree. But it allows show where that alert/order was created :) Just as an example.

This is a neat idea. Whatever implementation is easier would still work for this feature. Side note? Is it currently possible to get the barSeries viewing startTimestamp and endTimestamp on Zoom-in and Zoom-out? I'm thinking if it is worth implementing a resizeLineWidth option for createPriceLine much like chart.resize(x,y)

What's about labels we already have like in example Yes this would work, and would be consistent with theme Is it possible to get left justified? Label on the right works as well

I personally have a timeScale: { rightOffset: 20, } so it doesn't impact me

[timocov]

timeScale: { rightOffset: 20, } so it doesn't impact me

1. User can change it by dragging/scrolling the chart.
2. You are not only one who uses the library 🙂 Providing an API we should cover as much as possible cases. Otherwise the API will be unusable.

[karunkrishna]

Most brokers/software offset marker to the left to avoid alert string hiding the most important bar (the current bar)

[odlainepre]

@karunkrishna position for text , its good idea. Some think: left, right side. Offset options there are in private lib, its also good way, need to add 😀

[timocov]

Most brokers/software offset marker to the left to avoid alert string hiding the most important bar (the current bar)

Yeah, sounds reasonable.

Offset options there are in private lib

Which one?

[odlainepre]

@timocov

Which one?

• indent from the right edge, for order text. it's really cool, because the text close to the price border overlaps the bars
• it’s great to make the text of the order to the left side (I don’t remember if there is such a thing in a private lib)
• buttons for the order (delete), must have
• dragging an order, also a necessary option

p.s. look at the discord

[HighBreedTech]

i need help @ https://github.com/tradingview/lightweight-charts/issues/348 concerning market please

[tsilverberg]

Include the following options:

1.lineWidth: {px or %} the length the priceLine spans to the left 2.htmlBody: and HTML definable string so the end-user can create their own markers relative to the priceLine Could you please explain by source code? Thanks

[randalhsu]

Here is a patch implementing "draggable custom price line" for my project. Demo: https://jsfiddle.net/randalhsu/5un8r93g/ (The orders can be dragged in the price scale.)

Just in case anyone needs this function too 😀

[sadburai]

Just in case anyone needs this function too 😀

Thanks man, you are my hero! 💯

[RaenonX]

Here is a patch implementing "draggable custom price line" for my project. Demo: https://jsfiddle.net/randalhsu/5un8r93g/ (The orders can be dragged in the price scale.)

Just in case anyone needs this function too 😀

Thanks got the great works in advance for @randalhsu @timocov and the other devs! Can we officially integrate this patch into this package?

[randalhsu]

I've rebased the patch against lightweight-charts v3.8.0 tag. Look forward to integrate too.

[solchef]

let lineWidth = 2; var higherFloor = { price: activePrice * 0.2, color: '#b847bd', lineWidth: lineWidth, // lineStyle: lightChart.LineStyle.solid, axisLabelVisible: true, title: 'Call Floor', }; var selectionFloor = { price: activePrice, color: '#b847bd', lineWidth: lineWidth, // lineStyle: candleSeries.LineStyle.Solid, axisLabelVisible: true, title: 'Entry Price', }; var lowerFloor = { price: activePrice, color: '#b847bd', lineWidth: lineWidth, // lineStyle: candleSeries.LineStyle.Solid, axisLabelVisible: true, title: 'Put Floor', } console.log(activePrice) candleSeries.createPriceLine(higherFloor); candleSeries.createPriceLine(selectionFloor); candleSeries.createPriceLine(lowerFloor);

[SlicedSilver]

Thank you for your feature request for Lightweight Charts. In order to keep the library lightweight and maintain a narrow focus, we strive to include only strictly required features in the core library. As a result, we have decided that this requested feature should be implemented as a plugin instead, and will be closing this issue as a result.

We recently introduced the ability to write plugins for Lightweight Charts, allowing users like you to extend the functionality of the library without adding it to the core. We highly recommend implementing your feature request as a plugin to achieve the desired functionality while keeping the core bundle size smaller for all users.

To get started with plugins, please refer to our Plugins Documentation for a better understanding of what is possible and how plugins work. You can also explore our collection of plugin examples (with a preview hosted here) for inspiration and guidance on implementing specific functionality.

For your particular feature request, we suggest taking a look at the following examples (see above links):

• Partial Price Line
• User Defined Price Lines
• User Price Alerts

To help you get started quickly, we have created an NPM package called create-lwc-plugin, which sets up a plugin project for you. This way, you can hit the ground running with your plugin development.

If you do create a plugin based on your feature request, we would appreciate it if you could publish it on GitHub or NPM and let us know. This way, we can share it with the rest of the community. It would be helpful if you could prefix your NPM package name with lwc-plugin- for easier discoverability by others.

Thank you for your understanding and support. We believe implementing your feature request as a plugin will greatly benefit both you and the Lightweight Charts community.