Markers on Secondary series

Sample of how to add markers on a secondary series using a custom Marker Placement function.

by ChartIQ Library

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/chart/css/chartiq.css" media="screen" />


<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

JavaScript

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

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

// Declare a CIQ.ChartEngine object. This is the main object for drawing charts.
const stxx = new CIQ.ChartEngine({
  container: document.querySelector(".chartContainer")
});


// Connect the chart to the quote feed
stxx.attachQuoteFeed(quoteFeedSimulator, {
  refreshInterval: 5
});

// Render the primary chart
stxx.loadChart(
  "SPY", null,
  function() {

    var symbol = "T";

		// create the left axis
    var axis = new CIQ.ChartEngine.YAxis({
      position: "left",
      textStyle: "#FFBE00"
    });

		//add your series
    stxx.addSeries(
      symbol, {
        color: "#FFBEDD",
        yAxis: axis
      },
      function() {        
        //add the markers for that yAxis / plotField combination
        for (var i = 0; i < stxx.masterData.length - 10; i += 5) {
          new CIQ.Marker({
            stx: stxx,
            field: symbol,		// <<<<== custom field
            xPositioner: "date",
            x: stxx.masterData[i].DT,
            label: "events",
            node: new CIQ.Marker.Simple({
              type: "circle",
              category: "news",
              headline: "This is a Marker for a News Item",
              story: "This is the story of a split",
            })
          });
        }
        stxx.draw();
      }
    );
  }
);