Shading Renderer

Sample of how use the shading renderer

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:100%;height:400px;position:relative;"></div>

JavaScript

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

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

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

//define the left axis for your renderer
const axis = new CIQ.ChartEngine.YAxis();
axis.position="left";
axis.textStyle="#0044FF";
axis.decimalPlaces=0;            // no decimal places on the axis labels
axis.maxDecimalPlaces=0;        // no decimal places on the last price pointer

// set the renderer
const renderer = stxx.setSeriesRenderer(new CIQ.Renderer.Shading({params:{name:"shade", yAxis:axis}}));

renderer.setShading([
   {primary:'NOK', secondary:'SNE', color:'blue'} // color blue between them regardless of which is higher or lower
]);

// render the primary chart
stxx.loadChart(
    "SPY"
    ,null, 
    function(){
        // 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("NOK", {display:"NOK"},function(){
          renderer.attachSeries("NOK", "#FFBE00").ready();      
        });
        
        stxx.addSeries("SNE", {display:"Sony"},function(){
          renderer.attachSeries("SNE", "#FF9300").ready();
        });
   }
);