eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Remove vertical lines and change color of time axis

HI
In the attached image i want to remove vertical lines from the x axis which is time axis and also want to change the color to gray and font size to 16px, how can i achieve the same?



lines.JPG
lines.JPG (13.87 KiB) Viewed 1668 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Remove vertical lines and change color of time axis

Hi eraka,
We appreciate you reaching out to us with your inquiry.

To hide ticks you can use this CSS rule:

Code: Select all

.highcharts-xaxis .highcharts-tick:not(:first-child):not(:nth-last-child(2)) {
	display: none;
}
To change color and font size of labels in xAxis, just style them in xAxis.labels.style property.

Demo: https://jsfiddle.net/BlackLabel/1byf2tsz/
Demo: https://api.highcharts.com/gantt/xAxis.labels.style

Regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Remove vertical lines and change color of time axis

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Remove vertical lines and change color of time axis

Hi Hubert
In the timeline when i use GET API time is coming correctly but when i add/update or delete ant datapoint by using some button it getting de aligned in the image
time.JPG
time.JPG (9.08 KiB) Viewed 1638 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Remove vertical lines and change color of time axis

eraka,
Unfortunately, these labels are generated based on the provided data. I cannot guess what your data is basing only on the screenshot you have attached. I also don't know how you are adding points to the series. Could you reproduce the issue in an online editor that I could work on? You can do it here: https://jsfiddle.net/BlackLabel/0s2r4te3/ and send me a forked link.

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Remove vertical lines and change color of time axis

somehow i am not able to align code with fiddle...below is how i am generating my time x Axis:

xAxis: [{
// gridLineWidth: 1,
// currentDateIndicator: true,
currentDateIndicator: {
width: 1,
zIndex: 10,
// dashStyle: 'dot',
color: '#007993',
label: {
format: ''
}
},
allowDecimals: false,
endOnTick: false,
ordinal: false,
startOnTick: false,
type: 'datetime',
tickInterval: 3600 * 1000,
min: new Date(
this.t1.getFullYear(),
this.t1.getMonth(),
this.t1.getDate(),
0,
0
).getTime(),

max: new Date(
this.t1.getFullYear(),
this.t1.getMonth(),
this.t1.getDate(),
24
).getTime(),
labels: {
formatter: function () {
var ret = this.axis.defaultLabelFormatter.call(this);
if (/23:00/.test(ret)) {
ret = '23:59';
}
return ret;
},
style: {
fontSize: '14px',
color: '#9999a9'
}
},
}],
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Remove vertical lines and change color of time axis

Can anyone plz revert
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Remove vertical lines and change color of time axis

eraka,
I cannot reproduce your issue, by looking into your xAxis configuration. Please, reproduce your issue in the online editor, so that I could work on it. You can use some static data, just to reproduce the problem.

Regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Remove vertical lines and change color of time axis

this is example i created

https://stackblitz.com/edit/highcharts- ... service.ts

i local i am able to render the data but not here can you please see here....i have also posted here

viewtopic.php?f=19&t=49460&p=180011#p180011

as my chart.redraw not working

@kamil and @hubert, these are two problems i am getting if u can plz help
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Remove vertical lines and change color of time axis

eraka,

Sadly, we are not able to help you without a working demo. The fact, that it's not working makes it impossible to debug it and tell you where the problem is. What's more, the problem with data looks like a problem not related to the Highcharts chart configuration. Please, make sure to get a working application before sending it to us for debugging. Like I said before, if you are using some external data, please use it as static data so it works in StackBlitz.

Let us know once you fix the demo,
Best regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Remove vertical lines and change color of time axis

Hi eraka,
Actually, I don't see any of the problems, which you mentioned in previous posts. You can check the screenshot below. Hours are properly positioned.
gantt.png
gantt.png (155.5 KiB) Viewed 1529 times
Regards!
Hubert Kozik
Highcharts Developer
eraka
Posts: 123
Joined: Thu Apr 28, 2022 6:55 am

Re: Remove vertical lines and change color of time axis

hi hubert

i want just 24 hr timeline means 0 to 23:59 and where when i add new data then it got dealigned, plz see that
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Remove vertical lines and change color of time axis

eraka,

Well, I was trying to investigate what is the problem, but I can't spend so much time on it. I'm not sure if it's a problem with Highcharts, but you can report it on GitHub, it will be analyzed more there.

You can create a new bug ticket here: https://github.com/highcharts/highchart ... new/choose

Best regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Gantt”