How to use the d3fc.seriesSvgMulti function in d3fc

function yScatter(container, settings) {
    const data = groupData(settings, filterData(settings));
    const symbols = symbolType(settings);
    const color = seriesColors(settings);

    const legend = symbolLegend()
        .settings(settings)
        .scale(symbols)
        .color(color);

    const series = fc
        .seriesSvgMulti()
        .mapping((data, index) => data[index])
        .series(data.map(series => categoryPointSeries(settings, series.key, color, symbols)));

    const paddingStrategy = hardLimitZeroPadding()
        .pad([0.05, 0.05])
        .padUnit("percent");

    const xAxis = axisFactory(settings)
        .excludeType(AXIS_TYPES.linear)
        .settingName("crossValues")
        .valueName("crossValue")(data);
    const yAxisFactory = axisFactory(settings)
        .settingName("mainValues")
        .valueName("mainValue")
        .orient("vertical")

export default (series, settings) => {
    let orient = "both";
    let canvas = false;
    let xScale = null;
    let yScale = null;
    let context = null;

    let seriesMulti = fc.seriesSvgMulti();
    let annotationGridline = fc.annotationSvgGridline();
    let mainGrid = mainGridSvg(settings);
    let crossGrid = crossGridSvg;

    const _withGridLines = function(...args) {
        if (canvas) {
            seriesMulti = fc.seriesCanvasMulti().context(context);
            annotationGridline = fc.annotationCanvasGridline();
            mainGrid = mainGridCanvas;
            crossGrid = crossGridCanvas;
        }

        const multi = seriesMulti.xScale(xScale).yScale(yScale);

        const xStyle = orient === "vertical" ? crossGrid : mainGrid;
        const yStyle = orient === "horizontal" ? crossGrid : mainGrid;

.decorate(selection => {
                selection.each(function(_, index) {
                    d3.select(this)
                        .selectAll("g.bar")
                        .filter(d => d[0] !== d[1])
                        .attr("fill", color(dataset[index].key))
                        .attr("opacity", 0.9)
                        .each(function(data) {
                            configureTooltip.call(this, data, index);
                        });
                });
            });

        multi = fc.seriesSvgMulti().series([gridlines, multiWithOutGrid]);
    } else {
        multi = fc
            .seriesSvgMulti()
            .series([gridlines, barSeries])
            .decorate(selection =>
                selection
                    .filter((_, index) => index !== 0)
                    .each(function() {
                        d3.select(this)
                            .selectAll("g.bar")
                            .filter(d => d.mainValue !== d.crossValue)
                            .attr("fill", "#1f78b4")
                            .attr("opacity", 0.9)
                            .each(configureTooltip);
                    })
            );
    }

export function configureMultiSeries(series1, series2) {
    return fc.seriesSvgMulti().series([series1, series2]);
}

.crossValue((d) => d.date)
            .baseValue((_) => closeExtent[0])
            .mainValue((d) => d.close)
            .decorate((selection) => {
                selection.attr('fill', `url(#${stockCode}-minichart-gradient)`);
            });

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

        const point = seriesSvgPoint()
            .crossValue((d) => d.date)
            .mainValue((d) => d.close);

        const multi = seriesSvgMulti()
            .series([area, line, point])
            .xScale(xScale)
            .yScale(yScale)
            .mapping((_, index, series) => {
                switch (series[index]) {
                case point:
                    return [data.slice(0)[0]];
                default:
                    return data;
                }
            });
        container
            .datum(data)
            .call(multi);
    }

function barChart(container, settings) {
    const data = groupAndStackData(settings, filterData(settings));
    const color = seriesColors(settings);

    const legend = colorLegend()
        .settings(settings)
        .scale(color);

    const bars = barSeries(settings, color).orient("horizontal");
    const series = fc
        .seriesSvgMulti()
        .mapping((data, index) => data[index])
        .series(data.map(() => bars));

    const xAxis = axisFactory(settings)
        .settingName("mainValues")
        .valueName("mainValue")
        .excludeType(AXIS_TYPES.ordinal)
        .include([0])
        .paddingStrategy(hardLimitZeroPadding())(data);
    const yAxis = axisFactory(settings)
        .excludeType(AXIS_TYPES.linear)
        .settingName("crossValues")
        .valueName("crossValue")
        .orient("vertical")(data);

export function configureMultiSvg(isSplitBy, gridlines, barSeries, dataset, color, container, groupNames, splits, mainLabel) {
    let multi;
    if (isSplitBy) {
        let multiWithOutGrid = fc
            .seriesSvgMulti()
            .mapping((data, index) => data[index])
            .series(barSeries)
            .decorate(selection => {
                selection.each(function(_, index) {
                    d3.select(this)
                        .selectAll("g.bar")
                        .filter(d => d[0] !== d[1])
                        .attr("fill", color(dataset[index].key))
                        .attr("opacity", 0.9)
                        .each(function(data) {
                            configureTooltip.call(this, data, index);
                        });
                });
            });

const getMulti = (symbol, chartData) => {
  const innerDimensions = getInnerDimensions();
  const xScale = getXAxisScale(chartData, innerDimensions.width);
  const yScale = getYAxisScale(chartData, innerDimensions.height);

  const area = getArea(symbol, chartData);
  const line = getLine();
  const point = getPoint();
  return seriesSvgMulti()
    .series([area, line, point])
    .xScale(xScale)
    .yScale(yScale)
    .mapping((_, index, series) => {
      switch (series[index]) {
        case point:
          return [chartData.slice(0)[0]];
        default:
          return chartData;
      }
    });
};

function columnChart(container, settings) {
    const data = groupAndStackData(settings, filterData(settings));
    const color = seriesColors(settings);

    const legend = colorLegend()
        .settings(settings)
        .scale(color);

    const bars = barSeries(settings, color).orient("vertical");
    const series = fc
        .seriesSvgMulti()
        .mapping((data, index) => data[index])
        .series(data.map(() => bars));

    const xAxis = axisFactory(settings)
        .excludeType(AXIS_TYPES.linear)
        .settingName("crossValues")
        .valueName("crossValue")(data);
    const yAxisFactory = axisFactory(settings)
        .settingName("mainValues")
        .valueName("mainValue")
        .excludeType(AXIS_TYPES.ordinal)
        .orient("vertical")
        .include([0])
        .paddingStrategy(hardLimitZeroPadding());