Make title of customPriceLine more adjustable

[christose]

Is your feature request related to a problem? Please describe.

Describe the solution you'd like 1) Be able to set the colour of the label background/foreground. 2) Setting the position of the label on the chart, far left, right or middle of the chart. Maybe by using a percentage value would be even better and more customizable. 3) Be able to use some arrows inside the label, up down etc.

Additional context We need to solve the label overlapping issue:

Example uploaded by @HighBreedTech:

[christose]

@timocov after a deep investigation, I have proceed with a draft implementation for the title alignment. I have pushed it remotely you can take a look there when you have time and share your thoughts :)

[timocov]

@christose I think we need to have proposal of changes first (how it should be like, what you want to change and so on). You can play with the library locally, but without approving from our side (I mean, we need to decide to do it first and mark it as "help wanted" or so - see contributing), we can reject a PR. Just trying to present misunderstanding.

[timocov]

Also, we can't merge any changes you need to have in the library. "need more feedback" means that we need to understand how many people need this and then make a decision.

[christose]

@timocov I fully understand and it sounds fair. I wasn't expecting to proceed with a pull request so soon. The only reason I asked you to check it was to get your feedback and proceed a bit further now that I have time to contribute (till the end of the month). My proposal is at the top :) The only thing we need is to see how many people need this in the community, as you said.

In the meantime, I would appreciate it if you could provide me with some tips so I will have something to work on, two things I want to solve.

1) The overlapping issue of the label with the line of the chart.

2) The issue when two price lines have values close to each other and the labels are pushing each other like in the screenshot. I was thinking to make the straight line with some ankle, any ideas on how I could achieve that? :)

[timocov]

The overlapping issue of the label with the line of the chart.

I think it's related to position of the price line itself (because we can only guarantee order between price line and series line).

The issue when two price lines have values close to each other and the labels are pushing each other like in the screenshot. I was thinking to make the straight line with some ankle, any ideas on how I could achieve that? :)

Did you try to toggle alignLabels option?

[christose]

The overlapping issue of the label with the line of the chart.

I think it's related to position of the price line itself (because we can only guarantee order between price line and series line).

I see, so we cant draw the white line above the blue bar of the chart I presume

The issue when two price lines have values close to each other and the labels are pushing each other like in the screenshot. I was thinking to make the straight line with some ankle, any ideas on how I could achieve that? :)

Did you try to toggle alignLabels option?

I have tried it now, I set it to false and it did the trick, I think like this is a bit better rather than drawing the lines like a zig-zag, it cant guarantee us perfect positioning. I assume in tradingview you have alignLabels = false for such cases when you want to show positions on the chart ?!

[timocov]

I assume in tradingview you have alignLabels = false for such cases when you want to show positions on the chart ?!

We have an option to control that on www.tradingview.com:

[christose]

@timocov thanks! Honestly, the work you've done... you are the best team out there working for the best company on this field :)

Do you think we could achieve something like that? My partner is so passionate to have something like that, he saw it in some other platforms... he got jealous 😂

[timocov]

Honestly, the work you've done... you are the best team out there working for the best company on this field :)

Thanks for such positive feedback, we do really appreciate it ❤️

Do you think we could achieve something like that?

We're always looking for improvement our charting solutions and I think I've seen this somewhere as well, but anyway thanks for sharing it. But I think we don't have a plan to implement it yet. Maybe in the future, but who knows ¯_(ツ)_/¯.

[christose]

Honestly, the work you've done... you are the best team out there working for the best company on this field :)

Thanks for such positive feedback, we do really appreciate it ❤️

Do you think we could achieve something like that?

We're always looking for improvement our charting solutions and I think I've seen this somewhere as well, but anyway thanks for sharing it. But I think we don't have a plan to implement it yet. Maybe in the future, but who knows ¯(ツ)/¯.

Can you provide me with a few small tips/instructions so I can give it a try ?! :) and when the time comes in the future my branch will be there for reference...

[timocov]

Can you provide me with a few small tips/instructions so I can give it a try ?! :)

The base price axis view (kind of view model) is https://github.com/tradingview/lightweight-charts/blob/master/src/views/price-axis/price-axis-view.ts, it manages 2 renderers (price axis and pane ones). Both of them are labels basically, but their common data contains the actual Y coordinate of labels (when we align labels, coordinate might be differ rather than just convert price to coordinate). The pane view for price line (horizontal line on the pane) is https://github.com/tradingview/lightweight-charts/blob/master/src/views/pane/series-horizontal-line-pane-view.ts. I guess that you need to extend https://github.com/tradingview/lightweight-charts/blob/master/src/renderers/horizontal-line-renderer.ts#L17 so it will be able to draw line like on your picture, provide needed data from a pane view to renderer and "sync" pane views between each other (their actual coordinates).

I think it should be something like that, but anyway it's start point for the impl.

[christose]

@timocov thank you for the info you've shared with me. I have started working on it, its not easy but its challenging :)

[christose]

@timocov I hope I am not a pain in the ass to you. I need your expertise. I have created the function to draw the custom shape line which is called from https://github.com/tradingview/lightweight-charts/blob/master/src/renderers/horizontal-line-renderer.ts#L44 by checking a parameter I am passing. Now the difficult part is to get access on the coordinates of the label when the line is being drawn so the line will follow those coordinates. Based on the first sentence of your instructions I came up with the following. Inside the https://github.com/tradingview/lightweight-charts/blob/master/src/views/pane/custom-price-line-pane-view.ts#L24 I did this: const priceAxisView = this._priceLine.priceAxisView();` Is this going to give me what I need? and what is the difference between the coordinate and fixedCoordinate?

I ended up looking the function https://github.com/tradingview/lightweight-charts/blob/master/src/gui/price-axis-widget.ts#L521 how the labels are being placed, do I need to find a way and draw both labels and their lines at the same place in the code? Because while I am drawing a line, I want to know the width of its label not only the Y coordinate, I suppose I don't need to know the other labels coordinate because they will be taken care of from the _alignLabels function. What I have discovered tho is when alignLables param is set to true, the price lines don't follow the labels because _alignLabels function aligns only labels, how can I access or call a function in _alignLabels to redraw the price line of each label correctly based on the Y coordinate...

[timocov]

Is this going to give me what I need? and what is the difference between the coordinate and fixedCoordinate?

Afaik coordinate is the original coordinate of the label, but fixedCoordinate is overridden coordinate, which might be changed due alignLabels option.

Is this going to give me what I need?

I'm not sure. custom-price-line-pane-view.ts is for custom price lines only (created via createPriceLine). But perhaps getting coordinate and fixedCoordinate might be right direction (I can't tell you sure, because it's a bit hard to keep all changes in the head without looking at changes and architecture we'll get if we apply that changes).

Because while I am drawing a line, I want to know the width of its label not only the Y coordinate, I suppose I don't need to know the other labels coordinate because they will be taken care of from the _alignLabels function. What I have discovered tho is when alignLables param is set to true, the price lines don't follow the labels because _alignLabels function aligns only labels, how can I access or call a function in _alignLabels to redraw the price line of each label correctly based on the Y coordinate...

It's tricky. The only renderer knows the real coordinates of a shape it draws, but we need to know that information in a view to share it with other renderers. I can't tell you what's the best way to solve it. Probably it's better to merge line renderer with pane label renderer in your case... As I mentioned, it's hard to tell about that without implementing it yourself.

[christose]

@timocov Hello! Thanks for your reply and your time, I appreciate it. I'm back to work today so I will give it a try based on your tips.

[christose]

@timocov Hello and happy new year! I apologize that I am posting the following questions here, I was thinking to open a discussion but seems the following points are different within each other I decided to post them in this ticket and have an unofficial discussion first.

I've gone through the docs so many times, yet I haven't figured out the following issues, I will start with the most critical one: 1) I need candlesticks to be thin and tall and I understand that in order to achieve that, it is related to the visible range of the data and the price scale range. However, I've set autoScale: false and the following code:

this.ChartSeries.applyOptions({
      autoscaleInfoProvider: (original) => {
        var res = original();
        var visible = this.GetHighLow(this.VisibleData);
        if (res.priceRange !== null && visible != null) {
            res.priceRange.minValue = visible.Low;
            res.priceRange.maxValue = visible.High;
        }
        res.margins = {
          above: 0,
          below: 0
        };
        console.log(res.priceRange);
        return res;
      }
    });

But it doesn't seem to work. I realized the following, even if I get in the console the {minValue: 1.206, maxValue: 1.21666} which are correct based on the visible range, the price scale has the min and max value based on all the data that exist inside the chart, the data that are loaded but not visible. The case I am describing is related to the screenshot below.

2) All the history data that are coming from the database are in UTC DateTime type of string e.g. "2021-01-14 23:30:00" . However, when I convert the DateTime to unixtime and push the data in the chart, the chart acts like the data are in UTC+2 which is my local DateTime and converts the itto DateTime - 2 hours so instead of 2021-01-14 23:30:00 it becomes 2021-01-14 21:30:00, however the live data that I am creating even if I get in javascript the utc datetime and then converting it to unix, I don't see the above issue.

3) I am setting a WaterMark but it is never shown on the chart, below my code

this.WaterMark = {
      color: obj.open < obj.close ? this.blue_indicator : this.red_indicator,
      visible: true,
      text: "O:" + obj.open + " H:" + obj.high + "  L:" + obj.low + "  C:" + obj.close + "",
      fontSize: 24,
      horzAlign: 'right',
      vertAlign: 'top',
    } as WatermarkOptions;
    this.ChartSeries.applyOptions(this.WaterMark);

I assume that the WaterMark is the one is the one in the screenshots below? (red arrow):

Assuming the watermark is the one I am pointing, can I achieve such a watermark like in the candle series, with OHLC in one color and values in another color ?

4) The price line is going behind the series, line or candlesticks, it gets override from them. However, I've checked both charts in tradingview and this is not happening there. See screenshots below.

[timocov]

I apologize that I am posting the following questions here, I was thinking to open a discussion

@christose please do it. I think it'll be better to avoid off-topic questions here. You can post every questions in a separate discussion. I'm going to hide your message as "off-topic" to avoid others to read it and think that it's related to the issue (but it seems that it's not).

[christose]

Agree @timocov and sorry for the inconvenience! I have just created the discussions. Thank you.

[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):

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

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.