Highcharts gantt Y axis label left align not padded

Question

We use the Gantt chart with a Y axis containing a treegrid. We want to left align the labels in the treegrid but the labels are sticked to the border of the cells. We would like to let a left padding but the options (x, padding...)

labels:{
        align: 'left',
        x: 15,
        padding: 15
     },

seem to not have any effect.

The following sample show the issue : https://jsfiddle.net/vegaelce/809a6b5z What is the correct syntax to let a space in front of each label ?

Answer 1

You can add padding using CSS styles. Just add useHTML: true to yAxis.labels and apply div with styles to all grid columns you want via columns.labels.format property:

yAxis: {
  ...
  labels: {
    useHTML: true
  },
  grid: {
    ...
    columns: [{
      title: {
        text: 'Project'
      },
      labels: {
        format: '<div style="padding: 0 15px;">{point.name}</div>'
      }
    }, {
      title: {
        text: 'Assignee'
      },
      labels: {
        format: '<div style="padding: 0 15px;">{point.assignee}</div>'
      }
    },
    ...
   ]
  }
}

Demo: https://jsfiddle.net/BlackLabel/9snhxfru/
API: https://api.highcharts.com/gantt/xAxis.labels.useHTML