How to use the d3fc.chart function in d3fc

var navHeight = 100; // Also maintain in variables.less
    var bottomMargin = 40; // Also maintain in variables.less
    var navChartHeight = navHeight - bottomMargin;
    var borderWidth = 1; // Also maintain in variables.less
    var extentHeight = navChartHeight - borderWidth;
    var barHeight = extentHeight;
    var handleCircleCenter = borderWidth + barHeight / 2;
    var handleBarWidth = 2;
    var yExtentPadding = [0, 0.04];
    var numberOfSamples = 200;

    var dispatch = d3.dispatch(event.viewChange);
    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();

    var navChart = fc.chart.cartesian(xScale, yScale)
        .yTicks(0)
        .margin({
            bottom: bottomMargin      // Variable also in navigator.less - should be used once ported to flex
        })
        .xOuterTickSize(0)
        .yOuterTickSize(0);

    var viewScale = fc.scale.dateTime();

    var area = fc.series.area()
        .xValue(function(d) { return d.date; })
        .y1Value(function(d) { return d.close; })
        .y0Value(function() { return yScale.domain()[0]; });

    var line = fc.series.line()
        .xValue(function(d) { return d.date; })

export default function() {
  var priceFormat;
  var volumeFormat;
  var timeFormat;
  var textYOffset = '0.71em';

  var tooltip = fc.chart
    .tooltip()
    .items([
      [
        'T',
        function(d) {
          return timeFormat(d.date);
        }
      ],
      [
        'O',
        function(d) {
          return priceFormat(d.open);
        }
      ],
      [
        'H',

export default function() {
    var dispatch = d3.dispatch(event.viewChange);
    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();
    var trackingLatest = true;
    var yAxisWidth = 60;

    var multi = fc.series.multi();
    var chart = fc.chart.cartesian(xScale, yScale)
        .plotArea(multi)
        .xTicks(0)
        .yOrient('right')
        .margin({
            top: 0,
            left: 0,
            bottom: 0,
            right: yAxisWidth
        });
    var zoomWidth;

    function secondary(selection) {
        selection.each(function(model) {
            xScale.discontinuityProvider(model.discontinuityProvider);

            var container = d3.select(this)

case crosshair:
                return crosshairData;
            default:
                return this.visibleData;
            }
        })
        .decorate(function(selection) {
            selection.enter()
                .select('.area')
                .attr('fill', 'url("#primary-area-series-gradient")');
        });

    var xScale = fc.scale.dateTime();
    var yScale = d3.scale.linear();

    var primaryChart = fc.chart.cartesian(xScale, yScale)
      .xTicks(0)
      .yOrient('right')
      .margin({
          top: 0,
          left: 0,
          bottom: 0,
          right: yAxisWidth
      })
      .decorate(function(selection) {
          selection.enter()
              .selectAll('defs')
              .data([0])
              .enter()
              .append('defs')
              .html('