0

I am currently using the React JSX Highcharts module to create a chart which exhibits several spline series dynamically (using .map function)

I have a global var called DataLines, in my render function I Wrote this:

{DataLines.map(Line,index)=>
<SplineSeries key={index} id={Line.id} name={Line.name} data={Line.points}/>}

when Datalines holds two lines, the chart displays it correctly. However, when I remove the first line from DataLines, it removes the second line instead from the chart (shown by the line names at the bottom of the chart), and the chart itself doesn't actually change, even though we re-rendered it using the new DataLines.

Furthermore, if I have a single line in my chart, and I change the DataLines to hold a different single line instead, it doesn't update the chart at all.

Using console log I see that the data sent into the render function is correct.

What can cause this, and how can I fix it? Is it a known issue with the module?

Thanks in advance!

EDIT : My Server is working on signalr in c# so it will be a bit more complecatied to share that but here is the event that triggers the update of the chart:

createDataLines(lines){
lines.foreach(l=>{
 lNewLine={
  name:l.name,
  id:l.id,
  points:l.points,
  }
   l.points.foreach(p=>{
     point={
     x:p.time,
     y:p.height,
     }
    lNewLine.points.push(point)
   })
 this.state.DataLines.push(lNewLine);
 });
}
  • The function is called from componentDidUpdate and the lines are recieved as props using set state from the parent component. So basically when I Recieve new props I create the graph with new data (and then we are back to the problem where the graph doesnt update properly).
Noa A
  • 1
  • 1
  • Could you try to produce the minimal working example, where the problem occurs? It's hard to deduce what exactly causes the issue. I recommend you to use StackBlitz platform to make mentioned example. – daniel_s Aug 02 '18 at 09:10
  • Hey I updated My post hope its more clear now. – Noa A Aug 05 '18 at 11:00
  • It doesn’t looks like a problem with server, so this information is unnecessary. What is the structure of `DataLines` variable, namely what type of data you storing there? Are you using the `Chart` constructor or `stockChart` one? I know the problems like that are a bit hard to solve if there is no enough informations, so the best way to help you would be to see reproduced problem on some live example. You don’t need to use any server, you can always use static data in your DataLines. Please answer on all my questions, because they’re important. – daniel_s Aug 06 '18 at 07:59
  • The structure of datalines is an array of Lines that are objects that I created which are built of three variables : name , id and points which contain x(time),y(normal int) values. I Edited the graph part so you can see the constructor – Noa A Aug 12 '18 at 12:28
  • Sorry cant add the js script code for some reason but I am using chart constructor – Noa A Aug 12 '18 at 12:38
  • Doesn't look strange, so it could be the problem with your component `state`. Until I see the live example, it will be hard to debug it and find the source of your problem, so could you prepare something? – daniel_s Aug 13 '18 at 10:36

0 Answers0