Line annotation ticks

<!DOCTYPE html>
<head>
  
  <script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
  <script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

const data = fc.randomFinancial()(100);

const annotations = data.filter((_, i) => i % 10 === 0)
    .map(d => d.close);

data.annotations = annotations;

const lineSeries = fc.seriesSvgLine()
    .mainValue(d => d.close)
    .crossValue(d => d.date);

const lineAnnotation = fc.annotationSvgLine()

// merge the annotation and line into a single series that is associated with the chart
  const mergedSeries = fc.seriesSvgMulti()
    .series([lineSeries, lineAnnotation])
    .mapping((data, index, series) => {
      switch(series[index]) {
        case lineSeries:
          return data;
        case lineAnnotation:
          return data.annotations;
      }
    })

const xExtent = fc.extentDate()
    .accessors([d => d.date]);

const yExtent = fc.extentLinear()
    .pad([0.1, 0.1])
    .accessors([d => d.close]);

const chart = fc.chartCartesian(
      d3.scaleTime(),
      d3.scaleLinear()
    )
    .xDomain(xExtent(data))
    .yDomain(yExtent(data))
    .yTickValues(annotations)
    .svgPlotArea(mergedSeries);
  
    
  d3.select('#chart-element')
      .datum(data)
      .call(chart);
     
  </script>
</body>
</html>

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.41