d3fc dual axes example

<!DOCTYPE html>
<meta charset='utf-8'>
<style>

#chart {
  width: 100%;
  height: 500px;
}

.open path {
  stroke: red;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script src="https://unpkg.com/d3fc@12.0.0/build/d3fc.min.js"></script>

<div id='chart'>
  <d3fc-group id='group' style='display: flex; height: 100%; width: 100%; flex-direction: column' auto-resize>
    <div style='flex: 1; display: flex; flex-direction: column'>
        <div style='flex: 1; display: flex; flex-direction: row'>
            <d3fc-svg class='close-axis' style='width: 3em'></d3fc-svg>
            <d3fc-svg class='plot-area' style='flex: 1; overflow: hidden'></d3fc-svg>
            <d3fc-svg class='open-axis' style='width: 3em'></d3fc-svg>
        </div>
        <d3fc-svg class='x-axis' style='height: 2em; margin-left: 3em; margin-right: 3em'></d3fc-svg>
    </div>
  </d3fc-group>
</div>

// components for computing the data extent
var closeExtent = fc.extentLinear()
  .accessors([
    function(d) { return d.close; }
  ]);
var openExtent = fc.extentLinear()
  .accessors([
    function(d) { return d.open; }
  ]);
var xExtent = fc.extentDate()
  .accessors([
    function(d) { return d.date; }
  ]);

// scales
var openScale = d3.scaleLinear();
var closeScale = d3.scaleLinear();
var xScale = d3.scaleTime();

// axes
var xAxis = fc.axisBottom()
  .scale(xScale);
var openAxis = fc.axisRight()
  .scale(openScale);
var closeAxis = fc.axisLeft()
  .scale(closeScale);

// series
var closeSeries = fc.seriesSvgLine()
  .crossValue(function(d) { return d.date; })
  .mainValue(function(d) { return d.close; })
  .xScale(xScale)
  .yScale(closeScale);

var openSeries = fc.seriesSvgLine()
  .crossValue(function(d) { return d.date; })
  .mainValue(function(d) { return d.open; })
  .xScale(xScale)
  .yScale(openScale);

// handle the 'draw' event from the d3fc-svg and d3fc-group elements
d3.select('.close-axis')
  .on('draw', function(d, i, nodes) {
    d3.select(nodes[i])
      .select('svg')
      .attr('viewBox', `${-event.detail.width} 0 ${event.detail.width} ${event.detail.height}`)
      .call(closeAxis);
  });

d3.select('.open-axis')
  .on('draw', function(d, i, nodes) {
    d3.select(nodes[i])
      .select('svg')
      .call(openAxis);
  });

d3.select('.x-axis')
  .on('draw', function(d, i, nodes) {
    d3.select(nodes[i])
      .select('svg')
      .call(xAxis);
  });

// handle the plot area measure event in order to compute the scale ranges
d3.select('.plot-area')
  .on('measure', function() {
      xScale.range([0, event.detail.width]);
      openScale.range([event.detail.height, 0]);
      closeScale.range([event.detail.height, 0]);
  })

var parseTime = d3.timeParse('%d-%b-%y');

// use the data-join component in order to create the inner 'g' elements. This ensures
// that the elements are only created once.
var closeJoin = fc.dataJoin('g', 'close');
var openJoin = fc.dataJoin('g', 'open');

d3.csv('prices.csv', function(error, data) {

// format the data
   data.forEach(function(d) {
     d.date = parseTime(d.date);
     d.close = +d.close;
     d.open = +d.open;
   });

// set the domain
  openScale.domain(openExtent(data));
  closeScale.domain(closeExtent(data));
  xScale.domain(xExtent(data));

// render the chart
  d3.select('.plot-area')
    .on('draw', function(d, i, nodes) {
      var svg = d3.select(nodes[i])
        .select('svg');
      closeJoin(svg, [data])
        .call(openSeries);
      openJoin(svg, [data])
        .call(closeSeries);
    });

d3.select('#group')
      .node()
      .requestRedraw();
});

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js

https://unpkg.com/d3fc@12.0.0/build/d3fc.min.js