tradingview/lightweight-charts

priceScale keeps visible even under a if condition

Closed this issue · 4 comments

ccfai8 commented

Lightweight Charts™ Version:

Steps/code to reproduce:
Is it working as intended? I am planning to show a priceScale to the left only if an event if fetched but the pricescale is visible at the initialization before any event is fetched. Is it a bug?

Actual behavior:

Expected behavior:

Screenshots:

CodeSandbox/JSFiddle/etc link:

SlicedSilver commented

Could you please provide a more detailed description (perhaps with code and screenshots)?

If I understand what you are asking then it is the expected behaviour.

ccfai8 commented

Could you please provide a more detailed description (perhaps with code and screenshots)?

If I understand what you are asking then it is the expected behaviour.

Sure.
if (EVENTNAME && Array.isArray(DATA)) {
const DATASeries = chart.addLineSeries({
color: isDarkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.8)',
lineWidth: 1,
priceScaleId: 'left',
});

  const DATA = DATA.map(item => ({
    time: (new Date(item.Date).getTime() / 1000) as UTCTimestamp,
    value: item['EVENT_1'],
  }));
  DATASeries.setData(DATA);

  chart.priceScale('left').applyOptions({
    visible: true,
    borderColor: isDarkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(197, 203, 206, 0.8)',
    scaleMargins: {
      top: 0.1,
      bottom: 0.3,
    },
  });
SlicedSilver commented

I suspect that you should rather create the chart only when you have the data ready instead of creating an blank chart and then adding the data later.

Additionally, I would look at the initial chart options for the price scales. You could set them to be hidden there.

const chart = createChart(container, {
   leftPriceScale: { visible: false },
   rightPriceScale: { visible: false },
});
ccfai8 commented

I suspect that you should rather create the chart only when you have the data ready instead of creating an blank chart and then adding the data later.

Additionally, I would look at the initial chart options for the price scales. You could set them to be hidden there.

const chart = createChart(container, {
   leftPriceScale: { visible: false },
   rightPriceScale: { visible: false },
});

Thanks! I have a stock chart already and I've set
rightPriceScale: { visible: true },

I want the leftPriceScale to be enabled only if an event is fetched but it seems that as long as it is defined. the leftscale shows up even before an event is fetched