Dylan Cristy
Posts: 13
Joined: Fri Oct 30, 2015 8:44 pm

How to force milestone data labels to always be above the milestone marker?

Hi,

I have a case where I am building a milestone comparison type chart, using the technique of setting

Code: Select all

yAxis: {
    uniqueNames: true
}
in order to get the milestones of one project all on the same line. All of my milestones have a small acronym representing the "type" of milestone that it is, and I want to show those as data labels, and I want them all to always be above the milestone. I managed to get them outside the milestone marker by setting

Code: Select all

dataLabels: {
    inside: false
}
on the series, but HighCharts is only putting them above on the first row, all the other rows it is putting them below:
labels below.PNG
labels below.PNG (4.95 KiB) Viewed 1089 times
How can I force them to all be above the markers?
Dylan Cristy
Posts: 13
Joined: Fri Oct 30, 2015 8:44 pm

Re: How to force milestone data labels to always be above the milestone marker?

This was answered on StackOverflow (https://stackoverflow.com/a/68544980/988264)
You can position data labels above the markers by using y property:

Code: Select all

  series: [{
      ...,
      milestone: true,
      dataLabels: {
        ...,
        y: -10
      }
    }, ...]

Live demo: https://jsfiddle.net/BlackLabel/yv641op0/

API Reference: https://api.highcharts.com/gantt/series ... taLabels.y
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to force milestone data labels to always be above the milestone marker?

Hi,
Thanks for the link to the solution.

Regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”