After adding more than 6 rewards to the list wheel order is different. Any solutions ?

[chaveene]

If the rewards array contains 6 or else element wheel will show those in the same order and after spinning it will land on the winning index. But if we increase the rewards array list by one (6 + 1) the order on the wheel will be incorrect and after the spin even trough the winning index is the same the wheel will point to a different section since the order is different on the wheel UI it will point to the current order winning index.

Initial Order = ['%10','%20','%30','%40','%50','FREE']; Wheel Order = ['%10','%20','%30','%40','%50','FREE'];

Initial Order = ['%10','%20','%30','%40','%50','%60','FREE']; Wheel Order = ['%10','%50','FREE','%60','%40','%20','%30'];

[sudippaudel793]

Hey i solved this issue and it is working in my case, i didn't use this package but i faced the problem you had and the issue is because of arcs "endAngle" which we will get from

const arcs = d3Shape.pie()(data);

if you console.log(arcs) you will get an array

[{"data": 1, "endAngle": 0.5235987755982988, "index": 0, "padAngle": 0, "startAngle": 0, "value": 1}, {"data": 1, "endAngle": 4.71238898038469, "index": 8, "padAngle": 0, "startAngle": 4.1887902047863905, "value": 1}, {"data": 1, "endAngle": 6.283185307179587, "index": 11, "padAngle": 0, "startAngle": 5.759586531581288, "value": 1}, {"data": 1, "endAngle": 5.759586531581288, "index": 10, "padAngle": 0, "startAngle": 5.235987755982989, "value": 1}, {"data": 1, "endAngle": 5.235987755982989, "index": 9, "padAngle": 0, "startAngle": 4.71238898038469, "value": 1}, {"data": 1, "endAngle": 3.6651914291880914, "index": 6, "padAngle": 0, "startAngle": 3.1415926535897927, "value": 1}, {"data": 1, "endAngle": 4.1887902047863905, "index": 7, "padAngle": 0, "startAngle": 3.6651914291880914, "value": 1}, {"data": 1, "endAngle": 1.0471975511965976, "index": 1, "padAngle": 0, "startAngle": 0.5235987755982988, "value": 1}, {"data": 1, "endAngle": 3.1415926535897927, "index": 5, "padAngle": 0, "startAngle": 2.617993877991494, "value": 1}, {"data": 1, "endAngle": 2.617993877991494, "index": 4, "padAngle": 0, "startAngle": 2.0943951023931953, "value": 1}, {"data": 1, "endAngle": 2.0943951023931953, "index": 3, "padAngle": 0, "startAngle": 1.5707963267948966, "value": 1}, {"data": 1, "endAngle": 1.5707963267948966, "index": 2, "padAngle": 0, "startAngle": 1.0471975511965976, "value": 1}]

in this array endAngle needs to be in ascending order to be properly indexed. Originally we will get endAngle in random manner. Just use

_.orderBy(arcs, ['endAngle'], ['asc'])

Hope this will solve the issue.