confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

labels not changing to accurate measures default.

Hey.

I have a gantt chart that ranges from max 2 years.

I have set the default setExtremes to display min to 2 months in the past and max to 2 months in future, spanning total 4 months.
With these settings it shows year on the first xaxis, and month on the second, which is fine. However when i select zoom into 1M with the rangeselector, i excpect to see months on the first axis, and weeks on the second when the scope is this narrow, but it does still show years and months, leaving out some details i need with more accurate date description.
Why is this? :)


Morten
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: labels not changing to accurate measures default.

Hi Morten!
We appreciate you reaching out to us!

Sadly, it is hard to tell you what is not working and what could be done without taking look at your code. Could you reproduce the issue in an online editor that I could work on? You can start here: https://jsfiddle.net/BlackLabel/ktyav3L5/

I am looking for your response.
Kind regards!
Hubert Kozik
Highcharts Developer
confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

Re: labels not changing to accurate measures default.

Hey.

Mine is pretty linked up with different modules and data from an api so its kind of cumbersome to reproduce.

The image shows my problem. if you press "All" in the rangeselector. You get Years in the upper xAxis, and Months in the lower one.
So what i want to doo, is to make it if you press "1M" in the rangeselector, there is no longer a need to see which year in the upper one, but this should now display the month, and the lower one should display week.

I added an image of the issue.
https://imgur.com/lNVsi6R
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: labels not changing to accurate measures default.

Morten,

This behaviour should be enabled by default, as you can see in this simple demo: https://jsfiddle.net/BlackLabel/vpga6xo5/ xAxis is changing the tickInterval based on the current chosen range by range selector - just as you requested.

I asked you for a demo because I am assuming, that you have some more properties, which are turning off this default behaviour. For example, maybe you have set a xAxis.tickInterval property to one month, like in this demo: https://jsfiddle.net/BlackLabel/nys1jf4x/ With this option, the tickInterval is not based on chosen range and it acts like the current one you are describing from your project.

To sum up, can you check if you set a constant tickInterval? If it won't help please share with me the chart configuration object and I will find a solution for you :)

Best regards!
Hubert Kozik
Highcharts Developer
confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

Re: labels not changing to accurate measures default.

Hey. doesnt seem to be any tickinterval constant set...


initChartOptions(series: any[]) {
const self = this;
// @ts-ignore
Highcharts.ganttChart(self.divReference.nativeElement as HTMLElement, {
subtitle: {
style: {
color: 'red'
}
},
yAxis: {
gridLineColor: false,
lineColor: false,
tickColor: false,
labels: {
style: {
color: '#ffffff'
}
},
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
xAxis: [
{
grid: {
borderColor: 'rgba(112,112,115,0.4)'
},
labels: {
style: {
color: '#ffffff',
}
},
alternateGridColor: '#00000020',
currentDateIndicator: {
width: 1,
label: {
verticalAlign: 'bottom',
style: {
color: '#ffffff'
}
},
zIndex: 1000
},
},
{
grid: {
borderColor: 'rgba(112,112,115,0.4)'
},
labels: {
style: {
color: '#ffffff',
}
},
}
],
chart: {
width: null,
events: {
load() {
const chart = this;
const startTime = moment().subtract(2, 'months').valueOf();
const endTime = moment().add(2, 'months').valueOf();
chart.xAxis[0].setExtremes(startTime, endTime);
}
},
renderTo: this.divReference.nativeElement as HTMLElement,
backgroundColor: false,
// zoomType: 'x',
// resetZoomButton: {
// theme: {
// fill: Rainbow.background,
// style: {
// color: Rainbow.text
// },
// states: {
// hover: {
// fill: Rainbow.focused
// },
// select: {
// fill: Rainbow.focused
// }
// }
// }
// }
},
rangeSelector: {
enabled: true,
selected: 2

},
scrollbar: {
enabled: true,
barBackgroundColor: 'gray',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonBorderRadius: 7,
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
},
series: [
{
name: 'Project 1',
type: 'gantt',
borderColor: '',
borderWidth: 10,
pointPadding: 0,
data: series

}]
} as Options);
}

And on another topic. Is it possitble to alter the sizes of the bars? only way ive found is to set a borderwidth to them to increase their sizes. But this makes "Completed" and "hover" scuffed.

Morten
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: labels not changing to accurate measures default.

Morten,

I think I have a solution for you. Ticks on the xAxis are calculated based on the provided data. When your data range is wide, the ticks also tend to cover a wider period of time. To change default behaviour you might set the tickInterval inside the xAxis.afterSetExtremes function with the use of the update method. Inside you might specify some conditions like visible range. The number 36e8 is a month in milliseconds, you can change it at whatever time you would like to. Please, check the simple demo below to see an example.

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

If you want to change the height of a particular point you can use a pointWidth property. You can find the demo here: https://jsfiddle.net/BlackLabel/3urvmLcb/

Let me know if that fits your requirement.
Kind regards!
Hubert Kozik
Highcharts Developer
confusedDude
Posts: 21
Joined: Wed Jul 27, 2022 9:31 am

Re: labels not changing to accurate measures default.

Thank you. This worked fine:)
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: labels not changing to accurate measures default.

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Gantt”