Helloworld with 2 built-in studies using custom properties

This is the jsfiddle implementation of helloworld.html including the initial rendering of 2 built-in studies loaded using custom properties for 'input' and 'output' values

by ChartIQ Library

HTML

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" />

<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";

// Activate the License Key
import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js";
getLicenseKey(CIQ);

import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js";

const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
}); // Declare a CIQ.ChartEngine object. This is the main object for drawing charts.

stxx.loadChart("SPY", sampleData, function() {
  // add anything you want done in the callback

  // in this case we are adding a moving average study
  const inputs = {
    "Period": 50,
    "Field": "Close",
    "Type": "ma"
  };
  const outputs = {
    "MA": "red"
  };
  CIQ.Studies.addStudy(stxx, "ma", inputs, outputs);

  // and a volume underlay
  CIQ.Studies.addStudy(
    stxx,
    "vol undr", {}, {
      "Up Volume": "blue",
      "Down Volume": "yellow",
      "Up Border": "red",
      "Down Border": "green",
    }
  );
});