Multiple renderers sharing a secondary axis

Sample of how to add multiple renderers sharing a secondary axis

by sonylnagale

HTML

<link rel="stylesheet" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>


<script src="https://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>
<script src="https://jsfiddle.chartiq.com/chart/examples/feeds/quoteFeedSimulator.js"></script>

JavaScript

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

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


stxx.setChartType('line');

// Load the primary chart
stxx.loadChart(
  "SPY", null,
  function() {

    // Note that all series attached to the same renderer become one group, and will be moved and deleted together.
    // So if you need to maintain individuality, you must have a render per series.
    // See https://jsfiddle.net/chartiq/uo97g326/

    var leftAxis = new CIQ.ChartEngine.YAxis({ // and give it its own y axis
      position: "left", // 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
    var barRenderer = stxx.setSeriesRenderer(
      new CIQ.Renderer.Candles({
        params: {
          yAxis: leftAxis
        }
      })
    );

    //create the mountain renderer
    var lineRenderer = stxx.setSeriesRenderer(
      new CIQ.Renderer.Lines({
        params: {
          type: "mountain",
          yAxis: leftAxis
        }
      })
    );

    stxx.addSeries("NOK", {
        display: "NOK Sample"
      },
      function() {
        barRenderer.attachSeries("NOK").ready();

        stxx.addSeries(
          "SNE", {
            display: "Sony Sample",
          },
          function() {
            lineRenderer.attachSeries("^USDGBP").ready();
          }
        );
      }
    );
  }
);