Helloworld with a built-in study using a custom display function

This is the jsfiddle implementation of helloworld.html including the initial rendering of a built-in study using a custom display function.

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";

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

// override the default rendering function for the volume overly
// and customize to render the histogram any way you you want it.
// any valid drawHistogram parameter can be used
CIQ.Studies.studyLibrary["vol undr"].seriesFN = function(stx, sd, quotes) {
  const seriesParam = [{
    field: "Volume",
    // set colors and opacity to anything you want. 
    fill_color_up: stx.canvasStyle("stx_volume_underlay_up").color,
    border_color_up: stx.canvasStyle("stx_volume_underlay_up").borderLeftColor,
    opacity_up: stx.canvasStyle("stx_volume_underlay_up").opacity,
    fill_color_down: stx.canvasStyle("stx_volume_underlay_down").color,
    border_color_down: stx.canvasStyle("stx_volume_underlay_down").borderLeftColor,
    opacity_down: stx.canvasStyle("stx_volume_underlay_down").opacity
  }];
  const params = {
    name: "Volume",
    panel: sd.panel,
    heightPercentage: 0.7,
    widthFactor: .75 // add gaps between bars by customizing the widthFactor
  };
  stx.drawHistogram(params, seriesParam);
};

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

  // and a volume underlay using a customized seriesFN ( above ).
  CIQ.Studies.addStudy(
    stxx,
    "vol undr"
  );
});