CodePen Embed - Complex Filled Areas

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() {
  const datafeed = new Datafeeds.UDFCompatibleDatafeed(
    "https://demo-feed-data.tradingview.com"
  );
  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: [
      "order_panel", 
      "trading_account_manager",
      "right_toolbar",
      'header_widget'
    ],
    enabled_features: [
      'hide_left_toolbar_by_default',
    ],
    custom_indicators_getter: function (PineJS) {
      return Promise.resolve([
        {
            name: 'Complex Filled Areas',
            metainfo: {
              _metainfoVersion: 52,
              name: 'Complex Filled Areas',
              id: 'ComplexFilledAreas@tv-basicstudies-1',
              description: 'Complex Filled Areas',
              shortDescription: 'Complex Filled Areas',
              is_price_study: false,
              defaults: {
                styles: {
                  plot_0: {
                    linestyle: 0,
                    linewidth: 1,
                    plottype: 0,
                    trackPrice: false,
                    transparency: 0,
                    visible: true,
                    color: 'blue', // color of the edge of the chart
                  },
                  plot_baseline: {
                    linewidth: 0,
                    linestyle: 0,
                    transparency: 0,
                    display: 1,
                    color: 'red', // color of the baseline
                  },
                },
                palettes: {
                  upperPalette: {
                    colors: [
                      {
                        color: '#D522FF', // purple-ish
                      },
                      {
                        color: 'rgba(0, 0, 0, 0)',
                      },
                    ],
                  },
                  lowerPalette: {
                    colors: [
                      {
                        color: '#ffd322', // yellow-ish
                      },
                      {
                        color: 'rgba(0, 0, 0, 0)',
                      },
                    ],
                  },
                },
                filledAreasStyle: {
                  fill_upper: {
                    color: 'purple', // ignored because replaced by palette colours
                    transparency: 0,
                    visible: true,
                  },
                  fill_lower: {
                    color: 'yellow', // ignored because replaced by palette colours
                    transparency: 0,
                    visible: true,
                  },
                },
                inputs: {
                  baseline: 0,
                },
              },
              plots: [
                {
                  id: 'plot_0',
                  type: 'line', // StudyPlotType.Line,
                },
                {
                  id: 'plot_baseline',
                  type: 'line', // StudyPlotType.Line,
                },
                {
                  id: 'plot_upper_fill',
                  type: 'colorer', // StudyPlotType.Colorer,
                  target: 'fill_upper',
                  palette: 'upperPalette',
                },
                {
                  id: 'plot_lower_fill',
                  type: 'colorer', // StudyPlotType.Colorer,
                  target: 'fill_lower',
                  palette: 'lowerPalette',
                },
              ],
              styles: {
                plot_0: {
                  title: 'Plot',
                  histogramBase: 0,
                  joinPoints: false,
                },
                plot_baseline: {
                  title: 'Baseline',
                  isHidden: true, // hides from options window
                },
              },
              filledAreas: [
                {
                  id: 'fill_upper',
                  objAId: 'plot_0',
                  objBId: 'plot_baseline',
                  type: 'plot_plot', // FilledAreaType.TypePlots,
                  title: 'Above baseline',
                  palette: 'upperPalette',
                  fillToIntersection: true,
                },
                {
                  id: 'fill_lower',
                  objAId: 'plot_0',
                  objBId: 'plot_baseline',
                  type: 'plot_plot', // FilledAreaType.TypePlots,
                  title: 'Below baseline',
                  palette: 'lowerPalette',
                  fillToIntersection: true,
                },
              ],
              palettes: {
                upperPalette: {
                  valToIndex: {
                    0: 0,
                    1: 1,
                  },
                  colors: [
                    {
                      name: 'Upper color',
                    },
                  ],
                },
                lowerPalette: {
                  valToIndex: {
                    0: 0,
                    1: 1,
                  },
                  colors: [
                    {
                      name: 'Lower color',
                    },
                  ],
                },
              },
              inputs: [
                {
                  type: 'float', // StudyInputType.Float,
                  defval: 0,
                  id: 'baseline',
                  name: 'Baseline',
                  min: -10,
                  max: 10,
                },
              ],
              format: { precision: 2, type: 'price' },
            },
            constructor: function() {
              this.main = function (context, inputCallback) {
                this._context = context;
                this._input = inputCallback;
​
                const baseline = this._input(0);
                const value = Math.random() * 200 - 100;
                const upperColor = value >= baseline ? 0 : 1;
                const lowerColor = value < baseline ? 0 : 1;
​
                return [value, baseline, upperColor, lowerColor];
              };
            },
          },
      ])
    },
  }));
  
  widget.onChartReady(async () => {  
    await widget.chart().createStudy('Complex Filled Areas', false, false);
    
    widget.chart().getPanes()[1].setHeight(1000);
    
    setTimeout(() => {
      widget.chart().getPanes()[0].collapse();
    }, 0);
  });
}
​
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.