Guidance Request: Adding Price Lines to Charts with streamlit-lightweight-charts

[thinh-vu]

Hello @freyastreamlit,

First off, I want to extend my gratitude for your incredible efforts with this package. It has significantly enhanced the interactive chart capabilities within my Streamlit applications.

Currently, I'm leveraging your package for integrating financial charts into my Streamlit projects. In exploring the JavaScript API of TradingView's Lightweight Charts, I noticed the existence of a createPriceLine method. This feature is particularly beneficial for denoting specific price levels such as minimum, average, and maximum prices or highlighting overbought and oversold levels on indicator subplots.

While experimenting with your package, I attempted to implement a price line without success. Below are the price line options I attempted to use:

priceLineOptions = {
    "price": 70,
    "color": "red",
    "lineWidth": 1,
    "lineStyle": 2,
    "lineVisible": True,
    "axisLabelVisible": True,
    "title": "Price Line",
    "axisLabelColor": "red",
    "axisLabelTextColor": "black"
}

Could you kindly provide guidance on configuring the chart to incorporate a price line with the above specifications using your package?

Here's a screenshot of the chart I've created using your excellent package.

Best regards, Thinh

[freyastreamlit]

Hi @thinh-vu

Sorry, just noticed this open issue.

This wrapper acts as a container and transfers data between python to javascript (one way), and 'python' cannot run 'javascript' methods, the python container just send settings to javascript:

renderLightweightCharts([
    {
        "chart": priceVolumeChartOptions,
        "series": priceVolumeSeries
    }
], 'priceAndVolume')

There are some other streamlit packages that implement some trickery to run methods on javascript - maybe in future

[freyastreamlit]

Having mentioned that, I have another variant of the lightweight-charts wrapper called the 'ntf' version. You can find it at the following link:

• https://github.com/freyastreamlit/streamlit-lightweight-charts-ntf

This version offers a unique feature of an aligned multipane experience, which proves to be quite useful in certain data exploration scenarios. Please note that it is a frozen version and will no longer receive any updates since it diverged from the main codebase. However, it serves its purpose exceptionally well in specific cases. There's a comprehensive example available, and it performs smoothly even when handling large amounts of data.

[thinh-vu]

Hi @freyastreamlit Thank you for sharing the 'ntf' version of the lightweight-charts wrapper. The aligned multipane experience sounds like an excellent feature for comprehensive data analysis and exploration. I'll definitely take a closer look at the example provided to better understand its implementation and potential applications. Thanks again for making this available to the community! Thinh