Streaming Bar Chart Conditional Highlight Bar Color Issue

[arnica04]

Hi,
I recently had a requirement of creating a streaming bar chart with timestamp. Also, I needed to change the color of the bar with some condition. For ex:
On x-axis we have time stamp
On y-axis random integers between 10 and 100
Condition for change of color if num >=30 && num<60 should get highlighted with color red
Retain 10 bar per trace.

Now the issue is when the chart renders first it produces some erroneous results in terms of highlighting. For example bar with 23 as y-value will get highlighted with red color. Later when the data points starts getting flushed from left hand side, the highlighting color gets auto-corrected.

Please find the codepen link which will reproduce the same error https://codepen.io/anon/pen/qYYbZN
Erroneous Rendering Snapshot 1:
Ideally in the below snapshot according to the given range for color bar with value 32 should be highlighted with red color

Erroneous Rendering Snapshot 2:
In this case bar with value 65 should not be colored red

These bar color automatically gets corrected when the data starts flushing from left. But till the time 10 points are plot they show erroneous results

[etpinard]

It seems to work ok when you start with marker.color: [] that is with a marker.color array of the same length as the x and y arrays.

See https://codepen.io/etpinard/pen/deeeoX?editors=0010

[arnica04]

Thanks, your suggestion has solved my problem. The bar chart is working correctly now.