Search code examples
javascripthighchartshighcharts-gantt

Highcharts Gantt - how to force data labels to always be above milestones?

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?

Solution

  • 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