0

I'm making a milestone comparison chart, and I'm putting the data labels above the milestone markers. The data labels are two rows of text.

I'm setting my own calculated chart.height in order to increase the row height so I can fit the data labels nicely within each row, and I'm using a combination of series.point.graphic.translate() and series.datalabels.y in order to position everything vertically within the row where I want it. I've got everything almost dialed in exactly how I want it.

However, it seems as though the data labels for the first row of data are not respecting the y offset I'm trying to set. In fact, it looks to me like instead of starting at the center of the row and offsetting the amount specified by series.datalabels.y, there's actually more offset being applied that is forcing the data labels to push up to the very top of the plot area.

In the screenshot, the red lines near most of the milestone markers/labels show what the offset should be: something very minimal, the label should be just barely above the point of the milestone marker. But the red boxes in the top row show how that offset is too much, the labels are being pushed too high (to where the top of the label is right against the edge of the plot area):

screen shot of chart

What's going on there, and how can I fix it?

Reference pen.

Dylan Cristy
  • 916
  • 11
  • 29
  • Set var rowHeight = 70; – liontass Jul 30 '21 at 18:59
  • But I don't want my row height to be 70, I want it to be 80. And although doing that in the pen kind of looks like it's fixing the problem because it makes the positioning of everything look more uniform, it's not actually fixing the problem. It also makes the milestone markers smaller, which actually then _increases_ the distance between the markers and their labels _everywhere else_. Not what I'm looking for. – Dylan Cristy Jul 30 '21 at 19:18
  • Hi @Dylan Cristy, Without the custom translation: http://jsfiddle.net/BlackLabel/sxyv8gwb/ data labels seem to align well. – ppotaczek Aug 02 '21 at 11:53

1 Answers1

0

Well, I figured it out...

If I just don't apply the y offset to the datalabels for the first row, they seem to line up much better:

// yValue is essentially the row here, so 0 is the first row
series: {
    dataLabels: {
        y: yValue === 0 ? 0 : -31
    }
}

Reference pen.

Dylan Cristy
  • 916
  • 11
  • 29