Second vertical axis not appearing (leftPriceScale)

[ryancwalsh]

Thank you so much for offering this amazing library!

I was very excited to try the TradingView library and was surprised that it wasn't built in React, so I was relieved to see that you created this React wrapper. :-)

Describe the bug

1. It would have been nice to have documentation explain that series options need to be passed as an options object that will be used here: https://github.com/Kaktana/kaktana-react-lightweight-charts/blob/53cb75398fdb508aa7edf7af3fc597f6151c6ce2/src/kaktana-react-lightweight-charts.js#L144.
2. It seems that priceScaleId: "left" is not working.

const lineSeries = [
  {
    data: mainSeriesData,
    options: {
      priceScaleId: "left", 
      title: "Portfolio Value"
    }
  },
  {
    data: percentSeriesData,
    options: {
      priceScaleId: "right",
      title: "Profit/loss %"
    }
  }
];

To Reproduce See https://codesandbox.io/s/stoic-northcutt-j9ti9?file=/src/App.tsx

Does kaktana-react-lightweight-charts wrapper not honor left vertical axis? Or am I doing something wrong?

(https://jsfiddle.net/3yeszpt5/ works without the wrapper.)

Expected behavior I should see 2 vertical axes, like at https://jsfiddle.net/3yeszpt5/.

Thank you so much for your help!

[tomlister]

Hi, try my fork with the updated distribution of lightweight charts. Kaktana is stuck on v2. Mine is on v3. The disparity in documenation led me to realise why none of my charts were working. https://github.com/ydne-am/kaktana-react-lightweight-charts

[ryancwalsh]

@tomlister Thanks for your message. I'm a bit confused since https://github.com/Kaktana/kaktana-react-lightweight-charts/blob/53cb753/package.json#L25 says 3.3.0.

This is my approach for now: https://github.com/tradingview/lightweight-charts/issues/200#issuecomment-841720129 But if I find that lacking, I'll check out your repo. Thanks.

P.S. I'm curious if you have a solution to https://github.com/tradingview/lightweight-charts/issues/742

[tomlister]

It's because they forgot to rebuild their dist. So version 2 is still being shipped on npm.

Not sure I'll take a look for you soon

[ryancwalsh]

@tomlister Interesting. Thanks.

[ghost]

@tomlister Hey! I tried your forked approach and used your library. However, I cannot use the priceScaleId: "left", just like ryancwalsh was saying. Were you able to implement this on your fork correctly?

Hope I can hear from you. Thanks in advance.

[tomlister]

Yep I was able to use it iirc. let me check my code.

[ghost]

Thanks a lot. I am not sure what I am doing wrong. I copied your fork and replaced my node_modules/kaktana-react-lightweight-charts folder with yours (downloaded the zip then extracted and changed the name to kaktana-react-lightweight-charts).

Edit: I am also forcing the install with npm --legacy-peer-deps since I am using "react": "^17.0.1".

Then I have:

<Chart
        options={options}
        lineSeries={chartData}
        autoHeight
        autoWidth
        darkTheme
      />

where:

const options = {
    rightPriceScale: {
      visible: true,
      borderColor: 'rgba(197, 203, 206, 1)',
      mode: 1,
    },
    leftPriceScale: {
      visible: true,
      borderColor: 'rgba(197, 203, 206, 1)',
      mode: 0,
    },
    timeScale: {
      rightOffset: 0,
      barSpacing: 0,
      minBarSpacing: 0,
      fixLeftEdge: true,
      lockVisibleTimeRangeOnResize: true,
      rightBarStaysOnScroll: true,
      borderVisible: false,
      visible: true,
      timeVisible: true,
      secondsVisible: false,
    },
    layout: {
      backgroundColor: themeContext.thirdBackground,
      textColor: themeContext.firstText,
    },
    grid: {
      vertLines: {
        color: 'rgba(255, 255, 255, 0.4)',
        style: 1,
        visible: true,
      },
      horzLines: {
        color: 'rgba(255, 255, 255, 0.4)',
        style: 1,
        visible: true,
      },
    },
  }

and

const chartData= [
  {
    data : dataSeries1,
    options: {
      priceScaleId: "left", 
    }
  },
  {
    data: dataSeries2,
    options: {
      priceScaleId: "right",
    }
  }
];

Maybe this will give a little more context. Thanks in advance.

[ghost]

@tomlister were you able to find your implementation?

[kdrendel99]

+1 to this issue