Custom date/time label below current price (like TradingView)

[biennguyen13]

I’m building a candlestick chart using Lightweight Charts and updating the current candle price in real time.

However, I’d like to display the date/time of the current candle below the price label, similar to how TradingView shows it — but currently, there’s no clear way to do that.

I’ve tried:
• Exploring the new plugin/primitive API (Lightweight Charts Next), but couldn’t find a way to draw a label below the price.
• Creating a new LineSeries with:
priceFormat: { type: 'custom', formatter: (price: number) => { return new Date(); }, }, but it didn’t have any effect.

It would be great to have a way (via plugin, primitive, or built-in API) to render a custom label below the current price, showing the corresponding date/time of the candle — just like TradingView does.

Here’s a screenshot example from TradingView showing what I mean:

And this is my demo:

Can anyone help me achieve this? I’d really appreciate any hint or example.

[illetid]

You can draw on priceScale via priceAxisPaneViews
You can try to get a y position via priceToCoordinate and add some height of the font size and few pixels of padding.

Alternative more robust but more complex solution would be create a new price label primitive that will include countdown itself

[SlicedSilver]

A community member (@tpunt) is working on a similar feature (bar countdown) as can be seen in this issue: #1986

https://github.com/tpunt/lwc-plugin-countdown-to-close/

[biennguyen13]

Thanks a lot @illetid and @SlicedSilver !
I’ll take a look at your suggestions and the plugin — really helpful 🙏

[tpunt]

Thanks for linking to the plugin, @SlicedSilver.

@biennguyen13 I have made a few cleanups since then to better show its utilisation.

[biennguyen13]

Thank you! @tpunt