CODEWITHSUNDEEP
javascriptcsshighchartshighcharts-gantt
Anju
Anju

Reputation: 39

Highcharts - Reduce the padding/ space for labels in x-axis (multiple)

I have created a gantt chart with x-axis showing 3 axis time, week and month similar to the image below :

enter image description here

I want to reduce the space or reduce the height of storkes in the high chart ticks. If we see the text June ans July has more space on top and bottom.

I tried adding the below CSS:

  svg > g.highcharts-axis-labels.highcharts-xaxis-labels.xaxis-week > text {
    transform: translate(0px, 10px);
}

svg > g.highcharts-axis-labels.highcharts-xaxis-labels.xaxis-days > text {
    transform: translate(0px, 10px);
}

but it will just move the text but not reducing the height of the tick. I tried setting ticklength but it is not working as well. I need to know if there is a way to achieve this as too much space is occupied by the boxes in the x-axis. Is there a way to set path dimensions or reduce stroke length for the same

Upvotes: 0

Views: 65

Answers (1)

jedrzejruta
jedrzejruta

Reputation: 596

You can simply use the labels.distance property inside of the x-axis object to increase or decrease the label padding:

xAxis: [{
    labels: {
        distance: 10
    }
}]

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

API: https://api.highcharts.com/gantt/xAxis.labels.distance

Upvotes: 0

Related Questions