JorrinKievit / react-ts-tradingview-widgets

This is a React component library for TradingView Widgets
https://tradingview-widgets.jorrinkievit.xyz/
MIT License
154 stars 48 forks source link

Chart reverts to default stock symbol #20

Closed tylrk closed 1 year ago

tylrk commented 1 year ago

Hello. I was wondering if there is any way to keep the chart from reverting to the default stock symbol when I change the theme of the chart. In my following code, when I switch from dark to light mode, my chart reverts back to the AAPL chart. Any help is much appreciated!

import React, { useState } from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import {
  AdvancedRealTimeChart,
  ColorTheme,
} from "react-ts-tradingview-widgets";

const App: React.FC = (props) => {
  const [theme, setTheme] = useState<ColorTheme>("light");

  function changeTheme(): void {
    setTheme(theme === "light" ? "dark" : "light");
  }

  return (
    <>
      <Navbar theme={theme} changeTheme={changeTheme} />
      <div className="chart">
        <AdvancedRealTimeChart theme={theme} />
      </div>
    </>
  );
};

export default App;
JorrinKievit commented 1 year ago

These are some issues I don't think I can solve. To my knowledge, there is no way to communicate with the charts after loading them. So unless you keep the symbol in your own states (which is annoying since you are not able to retrieve the chosen symbol from the AdvancedRealTimeChart, there is no way to prevent this. https://github.com/serdimoa/charting/blob/master/Chart-Methods.md states that it is possible, but it seems outdated and is no longer working. I have looked trough the loaded JavaScript -> https://s3.tradingview.com/tv.js -> but I couldnt find a solution there either

JorrinKievit commented 1 year ago

Now that I think about it, you could technically get the iframe, retrieve the symbol from the URL and add that as default symbol when changing theme 🤔

Nvm, The URL obviously doesn't change when changing a symbol in the chart itself 😅

tylrk commented 1 year ago

Yea, I tried looking through the JS as well, and I tried using various methods to get it to work through state. However, that was quite cumbersome and ended up as a dead end.

I appreciate the response though. This is still a great package. Thanks for putting this all together and sharing it!