Swap between comparison series and stacked histogram using the same underlaying data

Sample of how to swap between comparison series and stacked histogram renderers using the same underlaying data.

by sonylnagale

HTML

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

<div class="chartContainer" style="width:600px;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

// this is so you can access the "Close" from the stacked histogram
    stxx.addSeries("Close", {
      loadData: false
    });

    // hide the primary axis and series. We are not using them with histograms
    stxx.setYAxisPosition(stxx.chart.yAxis, "none");
    stxx.chart.seriesRenderers["_main_series"].params.hidden = true;

		// attach the renderer to the chart.
    stxx.setSeriesRenderer(histRenderer);

    // now, show the histogram
    histRenderer.removeAllSeries()
      .attachSeries("A", {
        color: "green",
        permanent: true
      })
      .attachSeries("B", {
        color: "blue",
        permanent: true
      })
      .attachSeries("C", {
        color: "red",
        permanent: true
      })
      .attachSeries("Close", {
        color: "black",
        permanent: true
      })
      .ready();


    /***********************/
    // display the line chart
    /***********************/

    // remove histogram renderers and data.
    stxx.removeSeriesRenderer(histRenderer);
    stxx.removeSeries('Close');

    // re-deisplay the main series and axis
    stxx.chart.seriesRenderers["_main_series"].params.hidden = false;
    stxx.setYAxisPosition(stxx.chart.yAxis, "right");

    // re-introduce the comparisons.
    stxx.addSeries("A", {
      color: "green",
      isComparison: true,
      loadData: false
    });
    stxx.addSeries("B", {
      color: "blue",
      isComparison: true,
      loadData: false
    });
    stxx.addSeries("C", {
      color: "red",
      isComparison: true,
      loadData: false
    });
  

// start the chart engine
var stxx = new CIQ.ChartEngine({
  container: $$$(".chartContainer")
});

//define the histogram renderer (reusable)
var histRenderer = new CIQ.Renderer.Histogram({
  params: {
    type: "histogram",
    subtype: "stacked",
    heightPercentage: .7, // how high to go. 1 = 100%
    widthFactor: .8, // to control space between bars. 1 = no space in between
    yAxis: {}
  }
});

// attach...