Shading Renderer

Sample of how use the shading renderer

by sonylnagale

HTML

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

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

CSS

.stx_line_up, .stx_line_down {
  color: #ffffffff;
}

JavaScript

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

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

// connect the chart to the feed
stxx.attachQuoteFeed(quoteFeedSimulator,{refreshInterval: 15});
// set the renderer ho shade between High and Low
const renderer = stxx.setSeriesRenderer(new CIQ.Renderer.Lines({params:{type: "step"}}));
/* 
renderer.setShading([
   {primary:'High', secondary:'Low', color:'blue'} // color blue between them regardless of which is higher or lower
]); */

// display primary data as line chart 
stxx.setChartType('step_rangechannel');

// render the primary chart and 
stxx.loadChart(
    "SPY"
    ,null, 
    function(){
     stxx.addSeries("SPY", {loadData: false, shareYAxis:true },function(){
          renderer.attachSeries("High", "blue").ready();      
          });
        // in the callback, add series and attach to the renderer with a y axis on the left.
        
       /*  // create your series and attach them to the chart when the data is loaded.
        stxx.addSeries("High", {loadData: false, shareYAxis:true },function(){
          renderer.attachSeries("High", "transparent").ready();      
        });
        
        stxx.addSeries("Low", {loadData: false, shareYAxis:true },function(){
          renderer.attachSeries("Low", "transparent").ready();
        });     */ 
   }
);