JSFiddle - React, Tailwind, and code Playground

by sonylnagale

HTML

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

<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart8.1/css/stx-chart.css" media="screen" />
<div class="chartContainer" style="width:800px;height:400px;position:relative;"></div>

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import sampleData from "https://jsfiddle.chartiq.com/chart/examples/data/STX_SAMPLE_DAILY.js";

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

const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});

stxx.chart.legend = {
  x: 400,
  y: 20
};
stxx.setChartType('line');

stxx.loadChart("SPY", sampleData);
//CIQ.Studies.addStudy(stxx, "rsi");

//Adding one more series with sample data
let secondarySeriesData = sampleData.map((dataPoint) => ({ Date: dataPoint.Date, Value: dataPoint.High }));

stxx.addSeries("NonPrimarySeries",
  {
    color: "blue",
    data: secondarySeriesData,
    yAxis: { position: "left", allowSharing: true }
  }
);

let secondarySeriesYaxis = stxx.chart.series["NonPrimarySeries"].parameters.yAxis;

//Adding sma on secondary series
CIQ.Studies.addStudy(stxx, "ma", { Field: "NonPrimarySeries",  subField: 'High',Type: "sma", offset: 0 }, null, { yAxis: secondarySeriesYaxis });

//Adding ema on secondary series. We are adding it on secondary yaxis but the first sma series shifted to primary yaxis after adding this.
//CIQ.Studies.addStudy(stxx, "ma", { Period: 20, Field: "NonPrimarySeries",  subField: 'High',Type: "ema", offset: 0 }, null, { yAxis: secondarySeriesYaxis });

console.log(stxx.chart.yAxis.studies);
console.log(secondarySeriesYaxis.studies);

stxx.draw();