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