Annotations are not vertically aligned in row

[tylerpashigian]

Description

I have a dumbbell chart and wanted to add an annotated point on each row (think of each row as a product item that can be from category 1, 2, or 3 and the annotation is the average value of that item's category). I have found that depending on the number of rows, the annotated point (square in this example) is not centered vertically in the row and is inconsistently positioned. There is a row that usually has the annotated point directly centered, and any row above that is shifted a little higher than center, and keeps getting more off-centered the further you get away from that row (ex. 1 row above is slightly offset, 5 rows above is very offset, etc), and vice versa in the rows below.

This was also happening with my lines at first, and I resolved that by adding the rangeBarGroupRows: true option.

My data is a bit unique since I have to dynamically set the color of the bar and marker depending on the data, so I made the series an array of single object arrays so each of the rows could contain their own dumbbell color logic.

I have created a codesandbox to reproduce this issue.

Steps to Reproduce

1. Open codesandbox linked above
2. View the chart to see annotations above/below the line depending on which row it is
3. Comment out/add more data points to the rawData var to see the difference as the number of rows change

Expected Behavior

The annotated square is not centered in the row of data/consistently offset

Actual Behavior

The annotated point should sit directly in the middle of the row, regardless of how many rows are on the chart.

Screenshots

Reproduction Link

https://codesandbox.io/p/sandbox/jovial-glade-wsw758