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