[XYChart] Multiple scales in one chart

[valtism]

I would like to have a chart that includes both lines and bars for a single chart. I would ideally like for the line series to have an xScale of type: "time" (so that the line starts at the left axis) and the bar series to be of type: "band" so that it doesn't overflow the left axis.

Since xScale is set on the chart level, I am unsure of how to make this work. Any advice would be appreciated.

[williaster]

We don't currently plan to support multiple x or y scales in XYChart. It seems like this could potentially be addressed with align props added in the BarSeries to get the alignment you want. It may even already be possible by modifying the padding scale config for a band type scale.

[Lucasjlw]

I recently solved this problem but only for Y scales. Putting it here for other people who need some insight on the same problem. I've never posted on a discussion before, so I apologize if just pasting a full example here is not accepted!

import { useCallback, useMemo } from 'react';

interface Datum {
    x: number;
    y: number;
    // This is used to store unscaled values for the tooltip
    oldY?: number;
}

// We repeat all of the y values into oldY so we can use oldY in the tooltip.
// As you will see below, the y value stores a scaled version of the data.
// Copying the y into oldY can be done automatically with a function.
const primaryData: Datum[] = [
    { x: 1, y: 100, oldY: 100 },
    { x: 2, y: 200, oldY: 200 },
    { x: 3, y: 300, oldY: 300 },
    { x: 4, y: 400, oldY: 400 },
    { x: 5, y: 500, oldY: 500 },
]

const secondaryData: Datum[] = [
    { x: 1, y: 5, oldY: 5 },
    { x: 2, y: 20, oldY: 20 },
    { x: 3, y: 80, oldY: 80 },
    { x: 4, y: 40, oldY: 40 },
    { x: 5, y: 30, oldY: 30 },
]

const Chart = () => {
    // This is in a useMemo in case primaryData is not static and changes based on user actions or application state.
    const [primaryMin, primaryMax] = useMemo(() => {
        const max = Math.max(...primaryData.map((d) => d.y));
        const min = Math.min(...primaryData.map((d) => d.y));

        return [min, max];
    }, [primaryData])

    const [secondaryMin, secondaryMax] = useMemo(() => {
        const max = Math.max(...secondaryData.map((d) => d.y));
        const min = Math.min(...secondaryData.map((d) => d.y));

        return [min, max];
    }, [secondaryData])

    // useCallback in case primaryMin or primaryMax have to change
    // We don't want to define them in the callback since it is a common case that we may use them elsewhere.
    const convertToPrimaryScale = useCallback((data: number[]) => {
        const max = Math.max(...data);
        const min = Math.min(...data);
        const range = max - min;

        const primaryDomain = primaryMax - primaryMin;

        const conversionFactor = primaryDomain / range;

        const convertedData = data.map((value) => {
            return primaryMin + (value - min) * conversionFactor
        })

        return convertedData;
    }, [primaryMin, primaryMax])

    const convertPrimaryTickToSecondaryScale = useCallback(
        (tick: number) => {
            const primaryDomain = primaryMax - primaryMin;
            const secondaryDomain = secondaryMax - secondaryMin;

            const currencyToPercentConversionFactor =
                primaryDomain / secondaryDomain;

            const convertedTick =
                (tick - primaryMin) / currencyToPercentConversionFactor +
                secondaryMin;

            return convertedTick.toFixed(1);
        },
        [primaryMin, primaryMax, secondaryMin, secondaryMax]
    );

    // We convert the secondary data into the same range as the first so the data is visually comparable on the chart.
    const convertedSecondaryData = useMemo(() => {
        const data = secondaryData.map((d) => d.y);

        const convertedData = convertToPrimaryScale(data);

        return convertedData.map((value, index) => {
            return { x: secondaryData[index].x, y: value, oldY: secondaryData[index].y }
        })
    }, [convertToPrimaryScale])

    return (
        <XYChart
            xScale={{ type: 'band' }}
            yScale={{ type: 'linear' }}
            height={400}
            width={400}
        >
            <BarSeries
                data={primaryData}
                dataKey="primary"
                xAccessor={(d) => d.x}
                yAccessor={(d) => d.y}
            />

            {/* Axis for primary data */}
            <Axis
                orientation="left"
            />

            <BarSeries
                data={convertedSecondaryData}
                dataKey="secondary"
                xAccessor={(d) => d.x}
                yAccessor={(d) => d.y}
            />

            {/* Axis for secondary data */}
            <Axis
                orientation="right"
                tickFormat={tick => convertPrimaryTickToSecondaryScale(tick)}
            />

            <Tooltip
                renderTooltip={({ tooltipData }) => {
                    const { x, oldY } = tooltipData?.nearestDatum?.datum as Datum

                    return (
                        <div>
                            <p>{x}</p>
                            <p>{oldY}</p>
                        </div>
                    )
                }}
            />
        </XYChart>
    )
}

export default Chart;

[yara-tle]

@Lucasjlw Facing the same problem. Want to plot two independent y axis with two line series in a xychart. This is insane though, is there any other solutions to this out there?
I was thinking it could be possible to add a new instance of a xychart with only one axis and layer that on top of the other chart maybe.

[Lucasjlw]

Rendering another chart on top of the this one is something developers have done using uber's react-vis package to accomplish the same effect for an extremely similar problem (see: uber/react-vis#388 (comment)).
If you go the next comment in this thread you will see the basis for my solution as well.

Just make sure that both of your XYChart components are children of the same <DataProvider> and <TooltipProvider>.

[yara-tle]

Thanks @Lucasjlw for the input. Will try both methods to see which one is the best fir us. We have logic that might be difficult with having two charts on top of each other. Will give it a go with the example u made here.

[yara-tle]

Your approach worked like a charm for me. Thank you @Lucasjlw!