Markers in the past

This is the jsfiddle shows how to display a marker into the past by addong an 'invisible' candle

by ChartIQ Library

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>

<div id="stxEventPrototype" class="myEvents">
</div>

<div id="stxRhombusPrototype" class="myEvents">
  <span class="shape"></span>
  <span class="label"></span>
</div>

<div id="stxEventHover" class="myEvents">
  <span class="content"></span>
  <span class="tooltip"></span>
</div>

CSS

.myEvents {
  position: absolute;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: white;
}

/*style dividents to be a blue circle*/

.myEvents.dividend {
  background-color: blue;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

/*style news to be a small red square*/

.myEvents.news {
  background-color: red;
  width: 15px;
  height: 15px;
  line-height: 15px;
}

.myEvents.earnings {
  background-color: purple;
  border: 5px solid yellow;
}

/*style to be a brown Rhombus*/

.myEvents.rhombus .shape {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0px;
  background-color: yellow;
  border: 2px solid black;
  color: black;
  -webkit-transform: rotate(45deg);
  /* Saf3.1+, Chrome */
  -moz-transform: rotate(45deg);
  /* FF3.5+ */
  -ms-transform: rotate(45deg);
  /* IE9 */
  -o-transform: rotate(45deg);
  /* Opera 10.5 */
  transform: rotate(45deg);
}

.myEvents.rhombus .label {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  /* offset to center the label */
}

.myEvents.hoverMarker {
  background-color: pink;
  border: 2px solid black;
}

/*  create some rudimentary styling for our tooltip class */

.tooltip {
  display: inline;
  position: relative;
}

.hoverMarker:hover .tooltip:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(title);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 30px;
  content: attr(title);
}

.hoverMarker:hover .tooltip:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 11px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

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);

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

stxx.layout.crosshair = true

// make the first 3 candles invisible by just having the objects include the Date.
const sampleData = [{
    "Date": "1993-01-29"
  },
  {
    "Date": "1993-02-01"
  },
  {
    "Date": "1993-02-02"
  },
  {
    "Date": "1993-02-03",
    "Open": 44.41,
    "High": 44.84,
    "Low": 44.38,
    "Close": 44.81,
    "Volume": 529400,
    "Adj_Close": 31.77
  },
  {
    "Date": "1993-02-04",
    "Open": 44.97,
    "High": 45.09,
    "Low": 44.47,
    "Close": 45,
    "Volume": 531500,
    "Adj_Close": 31.91
  },
  {
    "Date": "1993-02-05",
    "Open": 44.97,
    "High": 45.06,
    "Low": 44.72,
    "Close": 44.97,
    "Volume": 492100,
    "Adj_Close": 31.89
  },
  {
    "Date": "1993-02-08",
    "Open": 44.97,
    "High": 45.13,
    "Low": 44.91,
    "Close": 44.97,
    "Volume": 596100,
    "Adj_Close": 31.89
  },
  {
    "Date": "1993-02-09",
    "Open": 44.81,
    "High": 44.81,
    "Low": 44.56,
    "Close": 44.66,
    "Volume": 122100,
    "Adj_Close": 31.67
  },
  {
    "Date": "1993-02-10",
    "Open": 44.66,
    "High": 44.75,
    "Low": 44.53,
    "Close": 44.72,
    "Volume": 379600,
    "Adj_Close": 31.71
  },
  {
    "Date": "1993-02-11",
    "Open": 44.78,
    "High": 45.13,
    "Low": 44.78,
    "Close": 44.94,
    "Volume": 19500,
    "Adj_Close": 31.86
  },
  {
    "Date": "1993-02-12",
    "Open": 44.88,
    "High": 44.88,
    "Low": 44.59,
    "Close": 44.59,
    "Volume": 42500,
    "Adj_Close": 31.62
  },
  {
    "Date": "1993-02-16",
    "Open": 44.47,
    "High": 44.47,
    "Low": 43.41,
    "Close": 43.47,
    "Volume": 374800,
   ...