Multiple charts with crosshair and scale linker

This jsfiddle illustrates how to implement multiple charts on one page and link their crosshairs and range selectors

by ChartIQ Library

HTML

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

<div class="chartLayout chartContainer1"></div>

<div class="chartLayout chartContainer2"></div>

CSS

.chartLayout {
  width: 400px;
  height: 200px;
  position: relative;
  /*border:1px solid blue;*/
  /*border-radius:16px;*/
}

/*turn off zoom buttons for small charts*/

#chartSize {
  display: none;
}

/* don't display the symbol label 
.stx-panel-title { 
	display: none;
}
*/

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

// Add this line and see further instruction in setCrossHair 
// if you are updating the charts with real time data,
// and want the cross-hair to remain visible in the current location 
// CIQ.ChartEngine.prototype.positionCrosshairsAtPointer=function(){};

const stxx1 = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer1"),
  layout: {
    crosshair: true,
    "chartType": "candle"
  }
});
const stxx2 = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer2"),
  layout: {
    crosshair: true,
    "chartType": "baseline_delta"
  }
});

// set all the charts to the same periodicity so the dates for the bars match. 
stxx1.setPeriodicity(1, 'day');
stxx2.setPeriodicity(1, 'day');

// show the axis on the last chart only
// since they are all moving together.
stxx1.chart.xAxis.noDraw = true;

CIQ.Linker = function() {
  this.links = [];
};

CIQ.Linker.prototype.setScale = function(master) {
  if (!master.chart) return;

  for (var i = 0; i < this.links.length; i++) {
    var obj = this.links[i];
    if (obj.stx === master) continue;
    var stx = obj.stx;
    if (!stx.chart.dataSegment) return;
    if (!master.chart.dataSegment) return;
    stx.linkerData.slave = true; // prevent the injection from getting called in the slaves
    stx.micropixels = master.micropixels;

    // use this to match the scroll location to exact beginning date for the visible dataSet
    // make sure you have code to deal with cases when the data may not exist
    // or the scroll location is invalid.
    // stx.chart.scroll=stx.chart.dataSet.length-stx.tickFromDate(master.chart.dataSegment[0].DT);

    // or use this to match scroll location regardless of...