Annotations are unable to get hourly data

I checked all the sample code in Anystock samples

none of them have hourly xAnchor value. I have sample below:

          // create annotation
      var annotation = plot.annotations();
      // create annotation vertical line
      annotation
        .verticalLine({
          // X - part of the first anchor
          xAnchor: '2009-07-02 15:15:00',
          stroke: {
            thickness: 2,
            color: '#60727B',
            dash: '10 15'
          }
          // disable interaction with Annotation
        })
        .allowEdit(false);

with above code Vertical line is drawn at the beginning of 2009-07-02 not the correct 15:15 time. I uploaded to jsfiddle What can be done?

Answer

This particular chart receives data from CSV in UTC timestamps and shows respectively. But the xAnchor is applied vis string. In this case, it takes into account your local timezone (provided by the browser settings). But it still shows as UTC. To overcome it you should subtract the timezone from the anchor date. Below is the modified code:

 var offset = new Date().getTimezoneOffset() * 1000 * 60;

anychart.onDocumentReady(function () {
    // set chart theme
anychart.theme('darkEarth');
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/csv-data/csco-daily.csv
      anychart.data.loadCsvFile(
        'https://cdn.anychart.com/csv-data/orcl-intraday.csv',
        function (data) {
          // create data table on loaded data
          var dataTable = anychart.data.table();
          dataTable.addData(data);

          // map loaded data for the ohlc series
          var mapping = dataTable.mapAs({
            open: 1,
            high: 2,
            low: 3,
            close: 4
          });
          
          // map loaded data for the scroller
          var scrollerMapping = dataTable.mapAs();
          scrollerMapping.addField('value', 4);
          
          // create stock chart
          var chart = anychart.stock();

          // set chart title
          chart.title('Annotated Candlestick Chart and EMA');

          // set chart padding
          chart.padding([15, 50, 57, 50]);

          // create first plot on the chart
          var plot = chart.plot(0);
          // grid settings
          plot.yGrid(true).xGrid(true).xMinorGrid(true).yMinorGrid(true);

          /*
          // create EMA indicators with period 50
          var ema = plot.ema(
            dataTable.mapAs({
              value: 4
            })
          );
          ema.series().stroke('1.5 #455a64');
          */

          var series = plot.candlestick(mapping).name('CSCO');
          series.legendItem().iconType('rising-falling');

          // create annotation
          var annotation = plot.annotations();
          // create annotation vertical line
          annotation
            .verticalLine({
              // X - part of the first anchor
              xAnchor: new Date('2009-07-02 13:30:00').getTime() - offset,
              stroke: {
                thickness: 2,
                color: '#60727B',
                dash: '10 15'
              }
              // disable interaction with Annotation
            })
            .allowEdit(false);

          // create annotation ellipse one
          annotation.ellipse({
            // X - part of the first anchor
            xAnchor: '1991-03-10',
            // Y - part of the first anchor
            valueAnchor: 0.22,
            // X - part of the second anchor
            secondXAnchor: '1991-04-21',
            // Y - part of the second anchor
            secondValueAnchor: 0.1,
            fill: 'none',
            stroke: '3 #DD3F2A',
            hovered: {
              stroke: {
                thickness: 3,
                color: '#DD3F2A',
                dash: '10 15'
              }
            }
          });
          // create annotation ellipse two
          annotation.ellipse({
            // X - part of the first anchor
            xAnchor: '1991-09-15',
            // Y - part of the first anchor
            valueAnchor: 0.33,
            // X - part of the second anchor
            secondXAnchor: '1991-10-27',
            // Y - part of the second anchor
            secondValueAnchor: 0.21,
            fill: 'none',
            stroke: '3 #DD3F2A',
            hovered: {
              stroke: {
                thickness: 3,
                color: '#DD3F2A',
                dash: '10 15'
              }
            }
          });
          // create annotation ellipse three
          annotation.ellipse({
            // X - part of the first anchor
            xAnchor: '1992-03-29',
            // Y - part of the first anchor
            valueAnchor: 0.58,
            // X - part of the second anchor
            secondXAnchor: '1992-05-24',
            // Y - part of the second anchor
            secondValueAnchor: 0.425,
            fill: 'none',
            stroke: '3 #DD3F2A',
            hovered: {
              stroke: {
                thickness: 3,
                color: '#DD3F2A',
                dash: '10 15'
              }
            }
          });
          // create annotation vertical line
          annotation
            .infiniteLine({
              // X - part of the first anchor
              xAnchor: '1991-03-31',
              // Y - part of the first anchor
              valueAnchor: 0.17,
              // X - part of the second anchor
              secondXAnchor: '1992-04-26',
              // Y - part of the second anchor
              secondValueAnchor: 0.25,
              stroke: {
                thickness: 2,
                color: 'green',
                dash: '10 15'
              }
              // disable interaction with Annotation
            })
            .allowEdit(false);

          // create scroller series with mapped data
          chart.scroller().candlestick(mapping);
          // set container id for the chart
          chart.container('container');
          // initiate chart drawing
          chart.draw();

          // create range picker
          var rangePicker = anychart.ui.rangePicker();
          // init range picker
          rangePicker.render(chart);

          // create range selector
          var rangeSelector = anychart.ui.rangeSelector();
          // init range selector
          rangeSelector.render(chart);
        }
      );
    });
<html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-stock.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-annotations.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/dark_earth.min.js"></script>
  <link href="https://cdn.anychart.com/playground-css/annotated/annotated-title.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container">
    
    <div class="container-title">
      
      <p>
        See also
        
        <a href="https://www.anychart.com/products/anystock/drawing_tools/" target="_blank">Drawing Tools and
          Annotations Demo</a>
      
      </p>
    
    </div>
  
  </div>