AnyChart eventMarker() Causing Error on Stock Chart

Question

I'm trying to add event markers to my stock chart, but as soon as I add them I get this error: anychart-stock.min.js:286 Uncaught TypeError: Cannot read properties of undefined (reading 'o')

I have added event markers on other pages of my application without an issue, and I have tried every single example I could find. Here is my current code to add the marker:

 var eventMarkers = chart.plot(0).eventMarkers();
   console.log(eventMarkers);
  // set markers data
  eventMarkers.data([
    { date: quotes[1].date, description: '9-11 attacks' },
    { date: quotes[1].date, description: 'Iraq War' },
    { date: quotes[1].date, description: 'Global financial collapse' },
    {
      date: quotes[1].date,
      description: 'OPEC cuts production targets 4.2 mmbpd'
    },
    { date: quotes[1].date, description: 'Greece\'s debt crisis' },
    { date: quotes[1].date, description: 'Japan earthquake' },
    { date: quotes[1].date, description: 'Russian financial crisis' },
    {
      date: quotes[1].date,
      description: 'OPEC production quota unchanged'
    }
  ]);

Here is what I am currently including:

 <script src='https://code.jquery.com/jquery-3.5.1.js'></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
      <script src='https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js'></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" charset="utf-8"></script>
 <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js"></script>
     <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js" type="text/javascript"></script>
      <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-stock.min.js"></script>
      <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-exports.min.js"></script>
      
      <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.min.js"></script>
      <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-annotations.min.js"></script>
      <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-ui.min.js"></script><!-- Data adapter -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>

This is driving me crazy, should be something simple that I have already done but something is going on and I can't figure it out.

Answer 1

Figured it out after hours of trial and error. The code to create the event markers needed to be before I created the mapping. No idea why this mattered here since that was not required on any other pages in which I created event markers.