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?

The snippet you pasted is bare minimum to get any help! can you provide a working fiddle. example: _deliveryInfo_ is passed as props but how will anyone know what is inside _deliveryInfo_ — Cyril Cherian, Sep 28 '17 at 08:45
With so few information you will probably get no help or generic help. Try to precise what portion of the code is faulty or what you expect to get for result as a run from one portion of code. — Christophe, Oct 02 '17 at 11:46

score 2 · Answer 1 · answered Oct 03 '17 at 12:56

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>)

Filtering out just one series in chartSeries in react-d3

1 Answers1