How to create multi line chart with dynamic data?

[tobiyas09]

Question

In victory native legacy I created a Multi Line Chart that would map over a datasets of line data inside VictoryChart

const data = [
[{x: 0, y: 10}, {x: 1, y: 11}, {x: 2, y: 12}], // <-- first line
[{x: 0, y: 20}, {x: 1, y: 21}, {x: 2, y: 23}], // <-- second line
[{x: 0, y: 30}, {x: 1, y: 31}, {x: 2, y: 33}], // <-- third line
]

but now with victory native xl I need to create data array like this

const data = [
{x: 0, y1: 10, y2: 20, y3: 30},
{x: 1, y1: 11, y2: 21, y3: 31}, 
....]

How can I map over the points array inside CartesianChart if I don't know how many lines there will be? In my use case it depends on how many data endpoints the user will select (one or more).

I tried to map over the keys of points from CartesianChartRenderArg but I got nothing.

    {({points, chartBounds}) => (
            <>
              {Object.keys(points).map((k) => {
                return (
                  <Line
                    points={points[k]}
                    color={colors[k]}
                    strokeWidth={2}
                    curveType="catmullRom"
                  />
                );
              })}
            </>
          )}
        </CartesianChart>

[keithluchtel]

@tobiyas09 take a look at the Dashed Axis example in the example folder and see if this helps:

https://github.com/FormidableLabs/victory-native-xl/blob/main/example/app/dashed-axes.tsx

it produces a chart that looks like this:

[tobiyas09]

That's great, but in the example, you know that points have low and high. I need a more generic approach, and I think I got it.

{yKeys.map((k, i) => {
            return (
              <>
                <Line
                  points={points[k]}
                  color={colors[k]}
                  strokeWidth={2}
                  curveType="catmullRom"
                />
                <Area
                  curveType="catmullRom"
                  points={points[k]}
                  y0={chartBounds.bottom}>
                  <LinearGradient
                    start={vec(0, 0)}
                    end={vec(0, 200)}
                    colors={[colors[k], addAlphaToHex(colors[k], 0.08)]}
                  />
                </Area>
                <Scatter
                  points={points[k]}
                  radius={3}
                  color={colors[k]}
                  style="fill"
                />
              </>
            );
          })}

where colors is array object with y keys

const keys = Object.keys(datasets[0]);
const xKeys = keys[0];
const yKeys = keys.slice(1);
const colors= {y1: '#f7ce64', y2: '#22dacd'}; // hardcoded for the example

[cyburns]

I actually came up with a very similar approach for the same problem. However, I have found that if there is missing data in one of the lines, this does not show up correctly. This is particularly an issue when there is missing data in the middle of the data array.

Any thoughts on how to fix this?

[tobiyas09]

@cyburns Did you try connectMissingData prop?