OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Anju
  • Start date Start date
A

Anju

Guest
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:

Code:
  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

<p>I have created a gantt chart with x-axis showing 3 axis time, week and month similar to the image below :</p>
<p><a href="https://i.sstatic.net/rEbBcq8k.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/rEbBcq8k.png" alt="enter image description here" /></a></p>
<p>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.</p>
<p>I tried adding the below CSS:</p>
<pre><code> 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);
}
</code></pre>
<p>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</p>
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Ads by Eonads
Top