How to add label to date buttons on the navigation of Gantt chart highcharts?

Question

I would like to add labels to the dates input we have in navigation of gantt chart. Something like attached in the image.

Also is it possible to change alignment of the yAxis labels (Prototypings, Development & Testing, Testing, Development, etc). I see currently these are left aligned but I want to know if i can customize and make it center/right aligned.

Answer 1

You can overwrite the labels on the chart.load event:

Example code:

  chart: {
    events: {
      load: function() {
        document.getElementsByClassName("highcharts-range-label")[0].firstChild.textContent = "From";
        document.getElementsByClassName("highcharts-range-label")[0].style.transform = 'translate(-30px, 3px)'
      }
    }
  }

In the case of the aligning yAxis.labels in your example, you can use category yAxis type as follows:

   yAxis: {
type: 'category',
labels: {
  align: 'center',
  format: '{point.name}'
},
  },

  series: [{
    data: [{
      name: 'Task',
      start: Date.UTC(2017, 11, 1),
      end: Date.UTC(2017, 12, 2),
      y: 0
    }]
  }]

Demo: https://jsfiddle.net/BlackLabel/p5syjb6r/

API Reference: https://api.highcharts.com/gantt/xAxis.labels.align