Multiple y axis

Sample of how to add series to a chart, each one with its own y axis and margin levels

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 quoteFeedSimulator from "https://jsfiddle.chartiq.com/chart/examples/feeds/quoteFeedSimulator.js";

// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.
var stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer"),
  preferences: { whitespace: 0 },
  layout: {crosshair:true}
});



// Connect the chart to the quote feed
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 5
});

// Set up the renderers to manage your series.
// Each renderer can then have as many series as you want assigned to it. 
// All the series on a renderer will share the renderer's properties.
// Note that a renderer only has to be defined once, and then you can add or remove series as you wish.

// This is only needed if you want to group the series in a specific way; 
// different than the default renderer for the chart.
// If all you want is to add a series to the primary instrument and share its properties, 
// such as the y axis, no separate renderer is needed, 
// and simply call addSeries() with your series color in the parameters.

var lineRenderer = stxx.setSeriesRenderer(
  new CIQ.Renderer.Lines({
    params: {
      yAxis: newAxis('right',false,false)
    }
  })
);

var histogramRrenderer = stxx.setSeriesRenderer(
  new CIQ.Renderer.Histogram({
    params: {
      subtype: "stacked",
      yAxis: newAxis('left',false,false),
      heightPercentage: .10
    }
  })
);

var mountainRenderer = stxx.setSeriesRenderer(
  new CIQ.Renderer.Lines({
    params: {
      type: "mountain",
      yAxis: newAxis('right',true,true)
    }
  })
);

// Render the primary chart
stxx.loadChart(
  "SPY", null,
  function() {
    // Using the loadChart callback to ensure the chart is ready to take on additional elements, 
    // add the...