rafaelklaessen / react-tradingview-widget Goto Github PK

how to studies shape modify

i want to change shape circle

<TradingViewWidget
  symbol="BITFINEX:BTCUSD"
  timezone={"Asia/Seoul"}
  theme={Themes.DARK}
  locale="kr"
  interval="1"
  studies={
      ['Volume@tv-basicstudies']
  }
  style={BarStyles.CANDEL}
  fullscreen
/>

What options do I need to add?
And finally, I want to make it look like a picture below. Is it possible?

This URL is the URL I refer to.
https://www.tensorcharts.com/

I would like to return the questions to Google translation machine and apologize for the lack of a sentence.

Due to the fact that it renders via new TradingView.widget() and not via React

I am facing an issue while using with Next.js. It silently fails to load on page refresh but whenever a change is made, hot reload happens, the chart is rendered.

full screen on load

I want to change background of chart. But overrides not working ?

Solution i find

new TradingView.widget({
    overrides: {
        'paneProperties.background': '#2C2F33',
    }
});

NextJs :

  <TradingViewWidget
                      autosize={true}
                      symbol={symbol}
                      interval={"D"}
                      timezone={"Etc/UTC"}
                      style={1}
                      locale={"en"}
                      toolbar_bg={"#2C2F33" || "transparent" || "#f1f3f6"}
                      enable_publishing={false}
                      hide_top_toolbar={true}
                      hide_legend={true}
                      save_image={false}
                      container_id={"tradingview_11786"}
                      theme={"dark" || "light"}
                      overrides={{
                        "paneProperties.background": "#2C2F33",
                        "paneProperties.backgroundType": "solid",
                        // background: "#2C2F33",
                        // backgroundColor: "#2C2F33",
                        // theme: "#2C2F33",
                        // volumePaneSize: "medium",
                      }}
                />

    Please help me.

This liabrary only for reactJS. I want to use this trading view in my react-native application.

How do I add my own data feed

Hello,

I could easily display the chart, nice work :) But I am getting 403 forbidden network error when using the chart search function (symbols).

I was wondering if this is something you have experienced although it's probably not the component itself but maybe some restrictions I am not aware of?

Could not find a declaration file for module 'react-tradingview-widget'. '/node_modules/react-tradingview-widget/index.js' implicitly has an 'any' type.
Try npm install @types/react-tradingview-widget if it exists or add a new declaration (.d.ts) file containing declare module 'react-tradingview-widget';ts(7016)

When I use autosize or custom size the half width of the price right bar is not visible.

At the end of the chart, we don't have a correct display of candles.(GEMINI source)

Hello,
Is there only one widget in this library?
For example how do I add a TradingView Mini Chart Widget?
Thank you...

When parent window size changed widget size remains the same.

Hey, I'm wondering if it's even possible to color these two parts of the widget.
If so, please tell me how :)

The options from this page don't seem to affect them
https://github.com/mmmy/css3demos/wiki/Overrides

Hi there 👋

Unable to get the drawing tools to render with the latest (1.3.2) release--pretty sure this was working before. Here's a sandbox with the hideSideToolbar prop set to false. Is there another prop I'm missing? Thanks

https://codesandbox.io/s/goofy-http-3bg9j?file=/src/App.js:312-327

<TradingViewWidget symbol="ETHUSD" />
<TradingViewWidget symbol="BTCUSD" />

try this to reproduce

Refreshing the page throws an error "cannot read property 'href' of undefined at getURL".

How I set datafeet ?

I'm trying to use a custom chart from tradingview website, example:

 b.propTypes = {
            widgetType: u.a.string,
            width: u.a.number,
            height: u.a.number,
          	chart: u.a.string,

As a parameter:

 <TradingViewWidget
    symbol="NASDAQ:AAPL"
    theme="Dark"
    locale="en"
    chart="v6JkCe1X"

But it's seems it doesn't work, is there a way?

Is there a list of "Widget Types" documented somewhere? How can I use the different types of widgets?

]

I'm a rookie.whether I can access my own data？ what am I supposed to do? , Thank you so much!!！

Hello, I need to use this graph in a project that I am doing but I need to configure it since the client wants certain aspects to be modified.
E.g this configurations
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "de_DE",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"range": "ytd",
"hide_side_toolbar": false,
"allow_symbol_change": true,
"calendar": true,
"studies": [
"AwesomeOscillator@tv-basicstudies"
],
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"container_id": "tradingview_071d6"
}
and the most important the UDF method to fill the chart with data...

Can't see the drawing tools when I have hide_side_toolbar=true.

How to remove Grid lines and Volume?

It effecting UI i want to change its position to bottom

Would be awesome if the Technical Analysis would be added also into this package.

https://www.tradingview.com/widget/technical-analysis/

I've tried to fork and do something, but I am noob at it. Just learning React.

"react": "16.9.0",
"react-native": "0.61.4",
"react-tradingview-widget": "^1.3.2",

How can i fix this issue ?

Thanks.

Hi, is there anyway that I can customize the background color of TradingViewWidget? I know there are two themes which are Dark and Light but I want to try changing the background color to something like green if possible

Is there anyway to get this working for server-side rendering?
window is undefined is the error that comes up.

I'm using this widget like:
<TradingViewWidget symbol={tvSymbol} widgetType="chart" chart={tv_idea_id} />

Which results in widget loading TradingView idea that was published (by me) on their WEB app (tv_idea_id is unique identifier generated on Tcreation, one can get it if he want's to share his idea as widget).

I've noticed that if I use private indicators (one needs to have access granted by indicator owner to use it) on chart of the idea, an exception is thrown (widget/chart is rendered perfectly).

Here is the exception from console:

> vendors_embed.51ec7662100beb1c5859.js:73: **GET** https://s.tradingview.com/embed/tv_idea_id/undefined/is_auth_to_get/PUB%3BDvlIWJyaxhOxGaJHALXGBG6YmRAOjRxu/1 **404**
>
> embed_published_widget.c51dad17fc88ede2cb8e.js:664 2020-01-05T02:43:41.901Z:Pine.ScriptLib:Requesting pine facade scripts failed, url: /is_auth_to_get/PUB%3BDvlIWJyaxhOxGaJHALXGBG6YmRAOjRxu/1
>
> embed_published_widget.c51dad17fc88ede2cb8e.js:575 Uncaught TypeError: Cannot read property 'indexOf' of undefined

It seems like TV widget is trying to send an additional request (since pine script, TV's scripting language is mentioned I realized that it must be something with indicator....so I tried loading idea with public indicators only and exception is gone) but it's failing with 404, because it seems like one option is undefined.

I've been looking through TV's package where ..../tv_idea_id/**undefined**/is_auth_to_get/... could be coming from but I've only found these lines in TV's widget:

var url = this.options.mobileStatic && this.isMobile ? TradingView.host + "/embed-static/" : TradingView.host + "/embed/";
//url = https://s.tradingview.com/embed/tv_idea_id
var queryString = "?method=script" + (this.options.locale ? "&locale=" + encodeURIComponent(this.options.locale) : "");
... src="' + url + this.options.chart + "/" + queryString + "&" + TradingView.generateUtmForUrlParams(this.options) + '" ...

...so obviously the URL returning 404 is not generated here. I think TV widget fires additional requests after the widget has loaded (widget allows drawing, which would allow access to private indicator, so I guess they would want to prevent such abuse).

I also tried searching for is_auth_to_get but I can't find it anywhere on the internet (Google let me down :/ ).

Did I miss any parameters that should be passed in to this widget or it may be an edge case that is not handled?

Hi! How can i search a symbol without entering exchange and currency?
Example: instead of BINANCE:BTCUSD -> BTC

I try your example and it alway said that " Invariant Violation: View config not found for name article"
I posted my code bellow
[import React, { Component } from 'react';
import {
Text, View, Image, TouchableHighlight,StyleSheet,Dimensions, TouchableOpacity
} from 'react-native';

import TradingViewWidget, { Themes } from 'react-tradingview-widget';

class TradingView extends Component{
render(){
return()
}
}
export default TradingViewWidget

hello i installed this library using npm and then when i run npm start to see trading view widget i have an error:
Module not found: Can't resolve './dist/index' in 'D:\WEB DEVEOLPER\React\fetch_less_bootStrap_prototypes\some-tips\node_modules\react-tradingview-widget'
sorry for bad english.

When I try to use this component in a project generated with preact create material tvtest, I get "TypeError: Cannot call a class as a function".

Would be neat if this package worked with Preact!

I Want to customize the graph like I want to remove the Grid of from graph is it possible ??

Hi ,
I try to add a 'TradingViewWidget' component to root view of my application. But it always appear error. 'can't find variable: Themes'.

how to change datafeed in this library?
connecting to a custom server required.
now ,

<TradingViewWidget
          locale="fa_IR"
          symbol="BTCUSD"
          theme={Themes.DARK}
          datafeed={new Datafeeds.UDFCompatibleDatafeed("https://demo_feed.tradingview.com")}

        />

does not work. how to import Datafeeds or any solution to run trading view chart library with custom data fetching from ws protocol.

I used the example in the readme and I got:

Cannot read property 'pop' of null

embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:33 Uncaught TypeError: Cannot read property 'pop' of null
at Object._decodeParams (embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:33)
at Object._decodeConnectionStatus (embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:34)
at Object._init (embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:33)
at embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:35
at Object. (embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:35)
at t (vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1)
at Object. (embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:366)
at Object. (embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:367)
at t (vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1)
at Object. (embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:657)
_decodeParams @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:33
_decodeConnectionStatus @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:34
_init @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:33
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:35
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:35
t @ vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:366
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:367
t @ vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:657
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:677
t @ vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:632
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:656
t @ vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:629
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:629
t @ vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:734
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:738
t @ vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1
window.webpackJsonp @ vendors_embed.4bfc5550ac7684c6ccbc.387511056d12.js:1
(anonymous) @ embed_embed_widget.74238a8332aa3e992889.eabf67cb1366.js:1

I am using
Node: 8.9.1
React:16.2.0

I'm facing with some errors when my componet is loaded.
In Console I have these problems:

-Common.LocalForage:IndexedDB is NOT available

-ChartApi.Core:Cannot get studies_metadata, reason: Error: No available storage method found.

-:ChartApi.Core:Cannot update studies_metadata cache, reason: Error: No available storage method found.

-Cannot read property 'length' of null

How can I fix these kind of errors?

Thanks

How I can use it React Native ?

found pass toolbar_bg color with #ff0000 format not work,
but doing toolbar_bg='red' does change the color

It might not related to this component, but directly related to the widget itself...

Hello, great job 👍

Can we render any custom timeseries in this widget?
I want to show the asset chart and my data in the additional layer.

Thank you

Hi , Is it possible to change src of trading view library?