How to use the d3fc.seriesCanvasMulti function in d3fc

.map(k => k.key)
            .concat(settings.hideKeys ? settings.hideKeys : [])
            .sort();

        const upColor = colorScale()
            .domain(keys)
            .settings(settings)
            .mapFunction(setOpacity(1))();

        const legend = colorLegend()
            .settings(settings)
            .scale(keys.length > 1 ? upColor : null);

        const series = ohlcCandleSeries(settings, seriesCanvas, upColor);

        const multi = fc
            .seriesCanvasMulti()
            .mapping((data, index) => data[index])
            .series(data.map(() => series));

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

        const xAxis = axisFactory(settings)
            .settingName("crossValues")
            .valueName("crossValue")(data);
        const yAxis = axisFactory(settings)
            .settingName("mainValues")
            .valueNames(["lowValue", "highValue"])
            .orient("vertical")
            .paddingStrategy(paddingStrategy)(data);

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;

        const gridlines = annotationGridline.xDecorate(xStyle).yDecorate(yStyle);

        return multi.series([gridlines, series])(...args);
    };

.mainValue(d => d.bollinger.average)
        .crossValue(d => d.crossValue)
        .decorate((context, d) => {
            context.strokeStyle = avgColor(d[0].key);
        });

    const bollingerAreaSeries = fc
        .seriesCanvasArea()
        .mainValue(d => d.bollinger.upper)
        .baseValue(d => d.bollinger.lower)
        .crossValue(d => d.crossValue)
        .decorate((context, d) => {
            context.fillStyle = setOpacity(0.25)(avgColor(d[0].key));
        });

    return fc.seriesCanvasMulti().series([bollingerAreaSeries, series, bollingerAverageSeries]);
}

if (useGroupColors) {
        color = seriesColorsFromGroups(settings);

        legend = symbolLegend()
            .settings(settings)
            .scale(symbols)
            .color(useGroupColors ? color : null);
    } else {
        color = seriesColorRange(settings, data, "colorValue");
        legend = colorRangeLegend().scale(color);
    }

    const size = settings.mainValues.length > 3 ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;

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

    const axisDefault = () =>
        axisFactory(settings)
            .settingName("mainValues")
            .paddingStrategy(hardLimitZeroPadding())
            .pad([0.1, 0.1]);

    const xAxis = axisDefault()
        .settingValue(settings.mainValues[0].name)
        .valueName("x")(data);
    const yAxis = axisDefault()
        .orient("vertical")
        .settingValue(settings.mainValues[1].name)

if (useGroupColours) {
        colour = seriesColoursFromGroups(settings);

        legend = symbolLegend()
            .settings(settings)
            .scale(symbols)
            .colour(useGroupColours ? colour : null);
    } else {
        colour = seriesColourRange(settings, data, "colorValue");
        legend = colourRangeLegend().scale(colour);
    }

    const size = settings.mainValues.length > 3 ? seriesLinearRange(settings, data, "size").range([10, 10000]) : null;

    const series = fc
        .seriesCanvasMulti()
        .mapping((data, index) => data[index])
        .series(data.map(series => pointSeriesCanvas(settings, series.key, size, colour, symbols)));

    const domainDefault = () => mainAxis.domain(settings).paddingStrategy(hardLimitZeroPadding().pad([0.1, 0.1]));

    const xScale = mainAxis.scale(settings);
    const yScale = mainAxis.scale(settings);

    const chart = fc
        .chartCanvasCartesian(xScale, yScale)
        .xDomain(domainDefault().valueName("x")(data))
        .xLabel(settings.mainValues[0].name)
        .yDomain(domainDefault().valueName("y")(data))
        .yLabel(settings.mainValues[1].name)
        .yOrient("left")