Width problem and persian prices

[arefweb]

Lightweight Charts™ Version: 4.0.1

Steps/code to reproduce:

Issue 1:

When price gets higher leftPriceScale or rightPriceScale width get wider. but at the same time the main chart region width doesn't follow and can't accommodate itself accordingly. so I noticed that the overall width of chart gets bigger than its parent container.
even if leftPriceScale or rightPriceScale had an id I could handle it somehow myself.

Issue 2:

PriceFormat type "price" is what I need but by default it adds decimal points. there is no way for "price" type to not add decimal point
for currency types other than dollar. Please add an option for price type to omit decimal points.

Thanks in advance.

[SlicedSilver]

Could you please share some screenshots / videos, or a code example for the issue you are experiencing with the widths?
From what I understand, you are seeing the entire chart getting larger than the container div element when the values in the price scale get really large. I tried to reproduce this with this example: https://jsfiddle.net/msilverwood/x97fhdpk/ (where the chart width should always match that of the black bar).
It appears to be working as expected.

The price format for a series can be specified using the priceFormat option on the series:
https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#priceformat

Here is an explaination of that option:
https://tradingview.github.io/lightweight-charts/docs/api/interfaces/PriceFormatBuiltIn

Setting a precision of 0 will result in the price scales not having decimal points.

Additionally, a custom price formatter can be specified within the chart options:
https://tradingview.github.io/lightweight-charts/docs/api/interfaces/LocalizationOptions#priceformatter

[arefweb]

This is the code sample:

Here is the screenshot of a large price number:
(Please note that I want the chart to be confined in its parent width ie. chartContainerRef )

Here is the screenshot of a regular price number:

I think that the chart region doesn't follow the priceScale width correctly.

the expected behavior would be for the chart region to shrink in width for larger priceScale widths.

[SlicedSilver]

Thanks for sharing the code and screenshots. I'll have a look at reproducing this later this afternoon (without the React and dynamic width property) but I can confirm that the what you are experiencing is unexpected, and the library shouldn't be expanding in that manner.

With respect to the React code, it is recommended that the chart is only created once (createChart should only be executed once per component). So you should try refactor your code so that the createChart is not within a useEffect. Ideally, you should create the chart once, and then only add / remove / update the series on that chart when the data or properties are changed. This will be more performant.

Additionally, the width option is being applied differently in two places in your code. Within the constructor it is clientWidth - 25, and on the resize event it is just clientWidth.

[arefweb]

Thank you Mark for your response. I will consider your suggestions in my code. Actually I have copied this code from lightweight chart documentation. So in documentation example, createChart was in useEffect .

[SlicedSilver]

Apologies, we will update the example in the documentation so it is a bit more performant.

[SlicedSilver]

I'm unable to replicate the issue on a basic page.

Test case with price scale on the left:
https://jsfiddle.net/msilverwood/4m0koxrj/
Test case with the page direction set to rtl:
https://jsfiddle.net/msilverwood/ot9e5nmx/

FYI: an upcoming fix will change the behaviour of the chart when direction: rtl is set for the page (like in your case). #1338

[SlicedSilver]

I would suggest that instead of having a resize handler and setting the width using clientWidth that you could rather use the autoSize option provided by the chart.

https://tradingview.github.io/lightweight-charts/docs/api/interfaces/ChartOptions#autosize