highchartslabelhighcharts-gantt

Highcharts gantt Y axis label left align not padded


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 ?


Solution

  • 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