Baseline synchronized chart

Baseline synchronized chart

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>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

JavaScript

import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart/js/advanced.js";
import "https://jsfiddle.chartiq.com/chart/js/componentUI.js"

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

const container = document.querySelector(".chartContainer");
Object.assign(container.style, { width: "100%", height: "300px" });

const stxx = new CIQ.ChartEngine({ container });


const [PMIdata, GDPdata] = getGDPPMIData();

baselineSynchedChart(
	stxx,
  {
    bar: { // barchart parameters
      symbol: "PMI",
      data: PMIdata,
      baselineLevel: 50,
      color: { up: "#9fd2a1", down: "#ee968a" }
    }, 
    line: { // linechart parameters
      symbol: "GDP",
      data: GDPdata,
      baselineLevel: 0,
      color: { up: "darkgreen", down: "#fcfb00" } ,
      yzoom: 150,
      yscroll: 40
    },
    periodicity: {
      period: 1,
      interval: 1,
      timeUnit: 'month'
    }
  }
);




function baselineSynchedChart(stx, { bar, line, periodicity }) {
	// set chart type to baseline delta
	stx.setChartType("baseline_delta");
	stx.xaxisHeight = 25;
	stx.chart.yAxis.drawCurrentPriceLabel = false;
	stx.container.querySelector(".chart-title").style.visibility = "hidden"; // hide title
	stx.controls.chartControls.style.visibility = "hidden"; // hide zoom

	Object.assign(
		stx.chart.baseline,
		{
			defaultLevel: line.baselineLevel,
			userLevel: false // hide drag handle preventing user from adjusting baseline
		}
	);

	// set range if data is provided
	let range
	if (line.data) {
		range = { dtLeft: new Date(line.data[0].Date), dtRight: new Date(line.data[line.data.length - 1].Date) }
	}

	stx.loadChart(line.symbol, { 
		masterData: line.data,
		periodicity,
		range
	}, onDataLoaded);

	function onDataLoaded() {
		// setup color of line chart
		const [seriesParam] = stx.mainSeriesRenderer.seriesParams;
		Object.assign(seriesParam,...