Multiple renderers sharing a secondary axis

Sample of how to add multiple renderers sharing a secondary axis

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>

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"),
  preferences: {
    whitespace: 0
  },
});

// connect the chart to the feed
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 15
});


stxx.setChartType('line');
/* 
const leftAxis = new CIQ.ChartEngine.YAxis({ // create a separate axis
  position: "left", // place it on the left
  textStyle: "#0044FF", // with labels of color #0044FF
  decimalPlaces: 0, // no decimal places on the labels
  maxDecimalPlaces: 0, // and no defimal places on the last price floating label either.
}); */

//create the candle renderer using the left axis
const/*  candleRenderer = stxx.setSeriesRenderer(
  new CIQ.Renderer.Candles({
    params: {
      yAxis: leftAxis
    }
  })
); */

//create the mountain renderer using the same left axis
const lineRenderer = stxx.setSeriesRenderer(
  new CIQ.Renderer.Lines({
    params: {
      type: "mountain",
      /* yAxis: leftAxis */
    }
  })
);

// Load the primary chart
stxx.loadChart("SPY");