Create TradingView Charts

The TradingView integration allows users to view Pyth prices on their own website. All Pyth prices made available through the TradingView integration are originating from Pythnet.

Choosing an Implementation Method for TradingView IntegrationCopy Anchor Link

There are primarily two methods to integrate TradingView with your website to display Pyth prices:

1. Using the TradingView WidgetCopy Anchor Link

• Advantages:
  • Simplicity: This is a plug-and-play solution which allows for quick integration. You won't need to engage in complex setup processes or handle any backend configurations.
• Disadvantages:
  • Limited Customization: The widget comes as-is, and while you can change basic parameters like the symbol or theme, more advanced customizations are restricted.

2. Using the Datafeed URL with Charting LibraryCopy Anchor Link

• Advantages:
  • Deep Customization: Suited for those who need a deeper level of integration and customization. By utilizing the UDF-compatible URL, you can tailor the look, feel, and functionality of the chart to better fit your application's needs.
• Disadvantages:
  • Added Complexity: Integrating the Charting Library requires more technical know-how and potentially more time compared to the simpler widget integration.

When deciding between the two, consider the user experience you want to provide, the technical expertise at hand, and the time you can allocate to the integration. For a rapid deployment with minimal adjustments, the TradingView Widget is the way to go. If you need more control and are prepared for a deeper dive into the implementation, the Datafeed URL with the Charting Library would be your best choice.

TradingView WidgetCopy Anchor Link

1. Add the following script(s) from TradingView to your website depending on your framework:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview"></div>
  <script
    type="text/javascript"
    src="https://s3.tradingview.com/tv.js"
  ></script>
  <script type="text/javascript">
    new TradingView.widget({
      autosize: true,
      symbol: "PYTH:BTCUSD",
      interval: "D",
      timezone: "Etc/UTC",
      theme: "light",
      style: "1",
      locale: "en",
      toolbar_bg: "#f1f3f6",
      enable_publishing: false,
      allow_symbol_change: true,
      container_id: "tradingview",
    });
  </script>
</div>
<!-- TradingView Widget END -->

2. Replace the symbol parameter with the Pyth symbol you want to display. For example, to display the price of Ethereum, use symbol: "PYTH:ETHUSD".

3. Replace the interval parameter with the time interval you want to display. For example, to display the price of Ethereum in 1-minute intervals, use interval: "1". Possible resolutions are daily (D or 1D, 2D ... ), weekly (1W, 2W ...), monthly (1M, 2M...) and an intra-day resolution – minutes(1, 2 ...).

4. Replace the timezone parameter with the timezone you want to display. For example, to display the price of Ethereum in the Eastern Time Zone, use timezone: "America/New_York".

5. Replace the theme parameter with the theme you want to display. For example, to display the price of Ethereum in dark mode, use theme: "dark".

6. There is a fully working open-source example of the TradingView integration by one of Pyth's contributors here. The example application is deployed here.

Note: The TradingView plug-and-play widget does not allow for much customization. If you want to customize the widget, you can use the TradingView Charting Library. Please see the next section for more details.

Using Datafeed URL with Charting LibraryCopy Anchor Link

Pyth Price Feeds provides a UDF-compatible datafeed URL that follows the TradingView UDF spec. You can implement your own datafeed on top of it or use the Charting Library's UDF adapter. If you need a step-by-step guide, refer to the How to connect data via Datafeed API tutorial.

The datafeed URL is https://pyth.dourolabs.app/v1/{channel}, where {channel} is real_time, fixed_rate@50ms, fixed_rate@200ms or fixed_rate@1000ms. For example: https://pyth.dourolabs.app/v1/real_time. The History API page documents each route and its parameters.

ExampleCopy Anchor Link

The UDF adapter calls these four routes under the datafeed URL:

• Config: https://pyth.dourolabs.app/v1/real_time/config
• Symbols: https://pyth.dourolabs.app/v1/real_time/symbols?symbol=Crypto.BTC/USD
• Search: https://pyth.dourolabs.app/v1/real_time/search?query=BTC
• History: https://pyth.dourolabs.app/v1/real_time/history?symbol=Crypto.BTC/USD&resolution=1&from=1790812800&to=1790816400 (from and to are Unix timestamps in seconds; requires an access token, see below)

There is no /streaming, /symbol_info, /time, /marks or /quotes route. For live prices, subscribe to the WebSocket stream described in Subscribe to Prices.

AuthenticationCopy Anchor Link

/history requires an Authorization: Bearer <token> header. Never put your API key in browser code. Instead, your backend mints a short-lived access token with POST https://pyth.dourolabs.app/auth/token and hands it to the page, which sends it in place of the key. Browsers can call /config, /search and /history cross-origin only when the request carries this access token. The Frontend Authentication guide walks through the full flow.

The stock UDFCompatibleDatafeed, including the prebuilt datafeeds/udf/dist/bundle.js, cannot send an Authorization header. Build the adapter from its datafeeds/udf/src folder instead and subclass UDFCompatibleDatafeedBase with a Requester that carries the token:

import { QuotesProvider } from "./datafeeds/udf/src/quotes-provider";
import { Requester } from "./datafeeds/udf/src/requester";
import { UDFCompatibleDatafeedBase } from "./datafeeds/udf/src/udf-compatible-datafeed-base";

class PythDatafeed extends UDFCompatibleDatafeedBase {
  constructor(datafeedURL: string, headers: Headers) {
    const requester = new Requester(headers);
    super(datafeedURL, new QuotesProvider(datafeedURL, requester), requester);
  }
}

const headers = new Headers({ Authorization: `Bearer ${await getPythToken()}` });
const datafeed = new PythDatafeed("https://pyth.dourolabs.app/v1/real_time", headers);

getPythToken() is the helper from the frontend example in the Frontend Authentication guide. The Requester sends the same headers object on every request, so when the token nears expiry, refresh it in place with headers.set("Authorization", "Bearer <new token>").