CodePen Embed - Customize order and position lines (trading primitives). Trading Platform

Live

​x
 
<!DOCTYPE html>
<html>
  <head>
    <title>TradingView Charting Library demo</title>
​
    <!-- Fix for iOS Safari zooming bug -->
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
    />
​
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/charting_library/charting_library.standalone.js"
    ></script>
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/datafeeds/udf/dist/bundle.js"
    ></script>
    <script
      type="text/javascript"
      src="https://trading-terminal.tradingview-widget.com/broker-sample/dist/bundle.js"
    ></script>
​
    <script type="text/javascript" src="script.js"></script>
  </head>
​
  <body style="margin: 0px">
    <div id="tv_chart_container"></div>
  </body>
</html>
​

Live

xxxxxxxxxx
 
function initOnReady() {
  var datafeed = new Datafeeds.UDFCompatibleDatafeed(
    "https://demo-feed-data.tradingview.com",
    undefined,
    {
      maxResponseLength: 1000,
      expectedOrder: "latestFirst",
    }
  );
​
  class CustomBroker extends Brokers.BrokerSample {}
​
  var widget = (window.tvWidget = new TradingView.widget({
    library_path:
      "https://trading-terminal.tradingview-widget.com/charting_library/",
    // debug: true, // uncomment this line to see Library errors and warnings in the console
    fullscreen: true,
    symbol: "AAPL",
    interval: "1D",
    container: "tv_chart_container",
    datafeed: datafeed,
    locale: "en",
    disabled_features: ["show_right_widgets_panel_by_default", "open_account_manager"],
​
    trading_customization: {
      position: {
        lineWidth: 4,
        quantityTextColor: "rgb(255,192,203)",
        lineBuyColor: "rgb(252,109,38)",
      },
      order: {
        lineWidth: 4,
        lineStyle: 2, // LineStyle.Dashed
        lineActiveBuyColor: "rgb(22,160,133)",
        quantityTextColor: "rgb(55,192,203)",
      },
    },
​
    broker_factory: function (host) {
      window.host = host;
      return new CustomBroker(host, datafeed);
    },
  }));
​
  widget.onChartReady(async () => {
    console.log("onChartReady");
​
    // Create position line
    tvWidget.chart().createPositionLine()
      .setQuantity("1000")
      .setPrice(170);
    
    // Create order line
    tvWidget.chart().createOrderLine()
      .setQuantity("10")
      .setPrice(175);
  });
}
​
window.addEventListener("DOMContentLoaded", initOnReady, false);
​

This Pen is owned by TradingView on CodePen.

See more by @tradingview on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.