Filtering out just one series in chartSeries in react-d3

Question

I am using react-d3 to create a graph with multiple correlated data sets, the problem I am running into is that one of the data sets does not necessarily have an entry for each point in the other. I can set the value to 0, but that creates the appearance that there is data there but it is 0, which is not the case.

Here is my code,(deliverRate always has data, adjustedRate does not necessarily have data):

const chartSeries = [
        {
            field: 'deliverRate',
            name: 'Delivery Rate',
            color: "#ff7f03"

        },
        {
            field: 'adjustedRate',
            name: 'Adjusted Rate',
            color: 'blue'
        }
    ];

    const x = function (d) {
        return new Date(d.generatedAt);
    }

    return (
        <div>
            <LineTooltip
                data={deliveryInfo.throttleHistory}
                width={1000}
                height={300}
                chartSeries={chartSeries}
                yLabel="Rate"
                x={x}
                xScale="time"
                xDomain={d3.extent(deliveryInfo.throttleHistory,function(d){return x(d)})}
                xLabel="Date"

            >
                <SimpleTooltip/>
            </LineTooltip>
        </div>)

Is there any way to create a filter that just puts a blank space where adjustedRate is null?

Answer 1

Just add this line in the function x d.adjustedRate = d.adjustedRate||'';

const chartSeries = [
            {
                field: 'deliverRate',
                name: 'Delivery Rate',
                color: "#ff7f03"

            },
            {
                field: 'adjustedRate',
                name: 'Adjusted Rate',
                color: 'blue'
            }
        ];

        const x = function (d) {
            d.adjustedRate = d.adjustedRate||'';
            return new Date(d.generatedAt);

        }

        return (
            <div>
                <LineTooltip
                    data={deliveryInfo.throttleHistory}
                    width={1000}
                    height={300}
                    chartSeries={chartSeries}
                    yLabel="Rate"
                    x={x}
                    xScale="time"
                    xDomain={d3.extent(deliveryInfo.throttleHistory,function(d){return x(d)})}
                    xLabel="Date"

                >
                    <SimpleTooltip/>
                </LineTooltip>
            </div>)