0

I'm building a milestone comparison chart using Highcharts Gantt.

Each of my milestones has a short acronym for the milestone "type", which I want to show as data labels, and I want them to always be above the milestone marker.

I managed to get them outside the markers by setting

dataLabels: {
    inside: false
}

on the series, but Highcharts is only putting the labels above the markers on the first row of data, on subsequent rows it's putting the labels below:

screen shot of label placement

I tired playing around with the verticalAlignment setting, but that doesn't seem to do what I want it to do.

How can I force Highcharts to always position the data labels above the milestone markers?

Dylan Cristy
  • 916
  • 11
  • 29

1 Answers1

1

You can position data labels above the markers by using y property:

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

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

API Reference: https://api.highcharts.com/gantt/series.gantt.dataLabels.y

ppotaczek
  • 36,341
  • 2
  • 14
  • 24