Adding lines dynamically

I would like to know if it’s possible to create lines dynamically.

So this is my chart:

<LineChart data={this.data}>
            <XAxis dataKey="name"/>
            <YAxis/>
            <CartesianGrid strokeDasharray="3 3"/>
            <Tooltip/>
            <Legend />
            <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>

And my data looks like this: [{“channel_id”:1,“date_time”:“2016-08-12 10:22:04”,“value”:43,“created_at”:“2016-10-19 12:26:05”,“updated_at”:“2016-10-19 12:26:05”}, {“channel_id”:2,“date_time”:“2016-08-12 08:49:04”,“value”:14,“created_at”:“2016-10-19 12:26:05”,“updated_at”:“2016-10-19 12:26:05”}, {“channel_id”:2,“date_time”:“2016-08-12 07:44:04”,“value”:29,“created_at”:“2016-10-19 12:26:05”,“updated_at”:“2016-10-19 12:26:05”}]

But than a 1000 more. Now the thing is that I have to create a line for every unique channel_id. But I don’t know the amount of unique channel_id’s on forehand. Side note: The x-axis is for the value and the y-axis is for the date_time.

Your answers are appreciated.

[zifnab87]

why not derive the line names directly from data structure? I have unknown list of variables that I would be plotting… so I would like to be able to draw the lines - after I have some of the data received

[nurgasemetey]

@parassikka77 I’ve done following, previous wasn’t working

<LineChart width={400} height={300} data={this.props.regionData}
    // margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid strokeDasharray="3 3" />
    <Tooltip />
    <Legend />
    {/* <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
    <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    <Line type="monotone" dataKey="amt" stroke="#82ca9d" /> */}
    {
        this.props.regions.map((region) => {
            return (<Line  name={region.name} key={`line_${region.name}`} stroke={region.color} dataKey={`${region.name}_value`} />)
        })
    }
</LineChart>

As you can see in line where this.props.regions.map, I create Line and assign color(you can randomize)