tradingview / lightweight-charts

Performant financial charts built with HTML5 canvas
https://www.tradingview.com/lightweight-charts/
Apache License 2.0
9.61k stars 1.64k forks source link

.applyOptions() doesn't show price scale values when they are initially set to false. #1368

Closed holsted closed 1 year ago

holsted commented 1 year ago

Lightweight Charts™ Version: 4.0.1

Steps/code to reproduce:

const chart = createChart(chartDOMRef.current, {
  width: width,
  height: height,
  handleScale: false,
  handleScroll: false,
  layout: {
    backgroundColor: '#191c21',
    textColor: '#d1d4dc',
  },
  timeScale: {
    visible: false, // Hide X axis labels
  },
  rightPriceScale: {
    visible: false, // Hide Y axis
  },
});

chart.applyOptions({
  rightPriceScale: {
    visible: true,
  },
})

Actual behavior:

When initializing the chart with rightPriceScale: {visible: false}, and then later setting it to visible, the scale values do not show up. The inverse works fine.

Expected behavior:

Setting rightPriceScale visibility to true after initialization should show the right price scale values.

CodeSandbox/JSFiddle/etc link:

Codesandbox repo: It initializes the charts then sets the rightPriceScale after 3 seconds. Scale appears with no text

https://codesandbox.io/s/magical-hofstadter-ue1k4h?file=/src/index.js

SlicedSilver commented 1 year ago

The root issue is that when creating a candle stick series, no price scales are visible, so it cannot be assigned to the correct one automatically (since it doesn't know which price scale will be made visible at a later stage).

If the priceScaleId is specified during the creation of the series, or at a later stage using applyOptions, then the example works correctly.

// specify the price scale during the creation of the series.
const candleSeries = chart.addCandlestickSeries({
  priceScaleId: "right"
});

// or at a later stage by using applyOptions
candleSeries.applyOptions({ priceScaleId: "right" });

The documentation states that if the priceScaleId option is not defined then it will default to right if the right scale is visible, or otherwise it will default to the left. (https://tradingview.github.io/lightweight-charts/docs/api/interfaces/SeriesOptionsCommon#pricescaleid) So in this case it is defaulting to left (even though left isn't visible either).

Using your example, if we make the left scale visible after 3 seconds instead of the right scale then it does appear to work correctly.

So I think that everything is working as expected.

holsted commented 1 year ago

Ah, that makes sense. And I did see that with the left scale. Thanks for clarification! Verified this works correctly.