tradingview / lightweight-charts-android

Android wrapper for lightweight-charts library
Apache License 2.0
101 stars 34 forks source link

Right Price Scale not visible when price goes like 0.000045 #100

Closed pankajlcx closed 2 years ago

pankajlcx commented 2 years ago

for larger decimal values like 0.00004 price scale not visible in range but crosshair shows value on right price overlay

timocov commented 2 years ago

any additional information?

pankajlcx commented 2 years ago

Hi updated the comment, can you please check.

timocov commented 2 years ago

Any screenshot or parameters you used to create a chart and a series?

pankajlcx commented 2 years ago

Please check the screenshot https://files.slack.com/files-pri/TE2EZK6TF-F02QKNW49V2/screenshot_2021-12-13-19-17-58-48_8d7a4a96a35315b1f20817d8814d789b.jpg

pankajlcx commented 2 years ago

On right there should be price marker values but here not visible

timocov commented 2 years ago

This link is not available for anybody outside of your slack org. Is it possible to share an image/video directly to github?

pankajlcx commented 2 years ago

Screenshot_2021-12-13-19-17-58-48_8d7a4a96a35315b1f20817d8814d789b

pankajlcx commented 2 years ago

please check

timocov commented 2 years ago

What parameters you used to create a chart and a series?

namchuai commented 2 years ago

Example: Screen Shot 2022-03-07 at 21 50 38

timocov commented 2 years ago

@namchuai https://github.com/tradingview/lightweight-charts-android/issues/100#issuecomment-993341519 ?

namchuai commented 2 years ago

@timocov hmm, I think the right axis is default. But here it is: version: 3.7.0

        binding.chartView.api.applyOptions {
            layout = LayoutOptions(
                textColor = requireContext().getColorAttr(R.attr.chartText).toIntColor(),
                fontSize = 10,
                fontFamily = "Avenir-Roman"
            )
            rightPriceScale = PriceScaleOptions(borderVisible = false)
            timeScale = TimeScaleOptions(
                borderVisible = false,
                fixLeftEdge = true,
                fixRightEdge = true,
                timeVisible = true,
                secondsVisible = false,
                tickMarkFormatter = Eval(
                    """
            function(time, tickMarkType, locale) {
                let timeMillis = time * 1000;
                let nowMillis = Date.now();
                let diff = nowMillis - timeMillis;

                console.log("timeMillis:", timeMillis);
                console.log("nowMillis:", nowMillis);
                console.log("diff:", diff);
                var options = { year: 'numeric', month: 'short', day: 'numeric' };

                if (diff < 86400000) {
                    //format timestamp, remove sec
                    const time = new Date(timeMillis).toLocaleTimeString('en-US', {hour12: false} ).split(':');
                    return time[0]+':'+time[1]
                }

                if (diff < 86400000 * 7) {
                    //format timestamp
                    return new Date(timeMillis).toLocaleDateString('en-US', options);
                }

                if (diff < 86400000 * 30) {
                    //format timestamp
                    return new Date(timeMillis).toLocaleDateString('en-US', options);
                }

                //format timestamp
                return new Date(timeMillis).toLocaleDateString('en-US', options);
            }
                    """.trimIndent()
                )
            )
            crosshair = CrosshairOptions(
                vertLine = CrosshairLineOptions(
                    style = LineStyle.DASHED,
                    color = ContextCompat.getColor(requireContext(), R.color.chart_crosshair)
                        .toIntColor(),
                    labelBackgroundColor = ContextCompat.getColor(
                        requireContext(),
                        R.color.chart_crosshair
                    ).toIntColor(),
                ),
                horzLine = CrosshairLineOptions(
                    style = LineStyle.DASHED,
                    color = ContextCompat.getColor(
                        requireContext(),
                        R.color.chart_crosshair
                    ).toIntColor(),
                    labelBackgroundColor = ContextCompat.getColor(
                        requireContext(),
                        R.color.chart_crosshair
                    ).toIntColor(),
                )
            )
            grid = GridOptions(
                vertLines = GridLineOptions(visible = false),
                horzLines = GridLineOptions(
                    color = requireContext().getColorAttr(R.attr.chartGrid).toIntColor()
                )
            )
        }

area:

        areaSeriesOptions = AreaSeriesOptions(
            lineWidth = LineWidth.TWO,
            lineColor = ContextCompat.getColor(requireContext(), R.color.purple).toIntColor(),
            topColor = ContextCompat.getColor(requireContext(), R.color.purple_40).toIntColor(),
            bottomColor = ContextCompat.getColor(requireContext(), R.color.purple_100).toIntColor(),
        )
timocov commented 2 years ago

So you're relying on the default values and expect that they will work for your specific scenario? 🙂 You have to change price format settings, see https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#priceformat

namchuai commented 2 years ago

No, I don't expect anything.

After change the price format setting, it shown the current price only. Maybe the gap between Y axis is too small. Is that any place I can config so that other price tag can be shown as well?

            localization = LocalizationOptions(
                priceFormatter = PriceFormatter(template = "\${price:#1:#12}")
            )

Screen Shot 2022-03-07 at 22 49 47

Thanks for your help and the great library!

timocov commented 2 years ago

After change the price format setting, it shown the current price only. Maybe the gap between Y axis is too small. Is that any place I can config so that other price tag can be shown as well?

@namchuai from the code above you didn't change the price format, you changed the default price formatter. https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#priceformat this is different option of a series, not of localization or a chart itself.

namchuai commented 2 years ago

@timocov Thanks for your clarification. It works now! Sample code for someone stumble on the issue:

areaSeriesOptions = AreaSeriesOptions(
    priceFormat = PriceFormat.priceFormatBuiltIn(
        type = PriceFormat.Type.PRICE,
        precision = 12,
        minMove = 0.000000000001f,
    ),
    lineWidth = LineWidth.TWO,
    lineColor = ContextCompat.getColor(requireContext(), R.color.purple).toIntColor(),
    topColor = ContextCompat.getColor(requireContext(), R.color.purple_40).toIntColor(),
    bottomColor = ContextCompat.getColor(requireContext(), R.color.purple_100).toIntColor(),
)