search

ankane / react-chartkick

Create beautiful JavaScript charts with one line of React
https://chartkick.com/react
MIT License
1.2k stars 58 forks source link

Y-axis values get changed #30

Closed chrise86 closed 5 years ago

chrise86 commented 6 years ago

I apologise in advance if this ends up being blatant user error, but it's been driving me mad.

The data seems to load and then jump around, which results in the y-axis values being out of order. I've attached a gif to show what happens.

chartjs

All data passed to the chart is actually in the correct order, so I have no idea why it's switching.

Any idea why this would happen?

ankane commented 5 years ago

Hey @chrise86, haven't seen that before. Did you figure it out? If not, can you add code to reproduce?

chrise86 commented 5 years ago

@ankane I'm not exactly sure why this was happening, but I think it's possibly due to the way object keys are handled.

It turns out that when using an array of objects, even though the objects remained the same, re-renders would cause the graph to jump about. I managed to mitigate this by using an array of arrays instead.

ankane commented 5 years ago

JavaScript doesn't guarantee ordering for objects, so that's likely the cause. https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order

chrise86 commented 5 years ago

Yeh I understand that, it’s just odd how the object wasn’t changing, so the prop to the graph component shouldn’t have changed, yet it was still re-rendering and losing its ordering.

Also, I believe that object property order behaviour is changing, or has changed🤔

EDIT: guess it depends on how the keys are being used https://stackoverflow.com/questions/30076219/does-es6-introduce-a-well-defined-order-of-enumeration-for-object-properties