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 ?
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