prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Highcharts gantt navigator to display quarters

Hi,

I am using highcharts navigator gantt layout, and my requirement is to display x axis in 4 quarters: one previous quarter, one current quarter, and two future quarters. X-axis to also display fiscal year. Fiscal year starts from Nov 1st to Oct 31st. I appreciate any help.

Thank you!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts gantt navigator to display quarters

Hi,
Welcome to our forum and thanks for contacting us with your question.

If this quarter might be a marked by line I think a good way to achieve this will be to use navigator.xAxis.plotLines

API References:
https://api.highcharts.com/gantt/naviga ... .plotLines

Live demo:
https://jsfiddle.net/BlackLabel/xgp8s7er/

Let me know if was what are you looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Highcharts gantt navigator to display quarters

Hi,

Thank you for your response.

PlotLines definitely seem to be a good option. I will give it a try.

Is there a way to default the initial view of the chart to display 4 quarters? And, can we have zoom options to be 1 Quarter, 2 Quarters, 3 Quarters, 1 fiscal Yr?

Regards,
Prithika
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts gantt navigator to display quarters

Hi,
I'm glad to hear that.

You can use rangeSelector.selected to select button which is select at the navigator.

Code: Select all

  rangeSelector: {
    enabled: true,
    selected: 1
  },
can we have zoom options to be 1 Quarter, 2 Quarters, 3 Quarters, 1 fiscal Yr?
You can also use the option from rangeSelector, explain more preciously what do you mean because I'm not sure.


API References:
https://api.highcharts.com/gantt/rangeSelector.selected

Live demo:
https://jsfiddle.net/BlackLabel/6wo5dtm9/

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Highcharts gantt navigator to display quarters

Hi,

Thank you for the response.

rangeselector works as expected.

But I would like to customize the zoom options that we see on the top to display, 1 Quarter, 2 Quarters, 3 Quarters, 1 Fiscal year, and All in place of 1M, 3M, 6M, YTD, 1Y, All. Please let me know if that is possible.

Thank you!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts gantt navigator to display quarters

Hi,
Thanks for more details.

Using the button event and the axis method called 'setExtremes' you might create some custom buttons as I did in the demo below.
Inside this method, you have to specify the new min and max on the x-axis.

API References:
https://api.highcharts.com/class-refere ... etExtremes

Live demo:
https://jsfiddle.net/BlackLabel/j36abp08
https://jsfiddle.net/BlackLabel/hv1x9ujL/

Feel free to ask any further questions.
Best regards.
Sebastian Hajdus
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Highcharts gantt navigator to display quarters

Hi,

Thank you for your help.

I am trying to set the min length of the bars to 1 week. What will be the value for minPointLength?

Best regards!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts gantt navigator to display quarters

Hi,
Thanks for the message.

In theory, something like this example should work, I need to check this example again.
https://jsfiddle.net/BlackLabel/vfrzdq08/

API References:
https://api.highcharts.com/gantt/xAxis. ... .week.main

Keep in touch,
Best regards.
Sebastian Hajdus
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Highcharts gantt navigator to display quarters

Thank you,

I am getting data from a database and thus, x axis range is not constant. And I am using plotbands to mark quarters Q1, Q2, Q3, Q4. To dynamically calculate the from and to values for each quarter in the entire range, I need to know the x axis range. Is there a way to get the min and max value of x axis?

Regards!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts gantt navigator to display quarters

Hi,
You can use this.xAxis[0].setExtremes(min, max) to recalculate the values you get from the database.

And how will you load this data through a CSV file?

Live demo:
https://jsfiddle.net/BlackLabel/pcy1ubj5/

API References:
https://api.highcharts.com/class-refere ... etExtremes
https://jsfiddle.net/gh/get/library/pur ... -datetime/

Best regards.
Sebastian Hajdus
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Highcharts gantt navigator to display quarters

Hi,

I don't think set extremes is a good option to what I am looking. Please refer to the below code:
plotBands: [{
color: '#888888',
from: Date.UTC(2021, 1, 2),
to: Date.UTC(2021, 3, 30),
label: {
text: 'Q2',
}
}]

My requirement is to display plot bands through the entire x-axis range. Manually adding plot bands for every 3 months is not an option as the x-axis min and max values are not constant in my case. And, adding code for multiple bands is not recommended. So I am looking to get the max and min value and add plot bands dynamically using a for-loop. I am not sure if that is possible but let me know if you have any suggestions for the same.

Regards!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts gantt navigator to display quarters

Hi,
For example, you can setExtremes in this way, but I suppose you want to set the accuracy to a given quarter.

Live demo:
https://jsfiddle.net/BlackLabel/bgkh90n8/

Best regards.
Sebastian Hajdus
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Highcharts gantt navigator to display quarters

Hi,

I have another issue. I have my y axis type set to category and uniquenames to true. But there is lot of space between each bar and the row height is the same for all rows. Is there a way to dynamically set the height of the row based on the number of bars in that row?

Regards!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts gantt navigator to display quarters

Hi,
Thanks for contacting us.

There is no option to dynamically set the row height directly from the API, they should adjust automatically.
It would be best if you share your example in the online editor.

There is an option yAxis.grid.cellHeight to set the cell height rigidly, but that's probably not what you're looking for.
https://api.highcharts.com/gantt/yAxis.grid.cellHeight

Best regards.
Sebastian Hajdus
Highcharts Developer
prithikakotte
Posts: 10
Joined: Wed Jun 30, 2021 9:33 pm

Re: Highcharts gantt navigator to display quarters

Here's an example of how my project looks like,
https://jsfiddle.net/uzngby8q/

I have multiple bars in each row and the number of bars is different for each row. But the issue here is that the height of each row is off with a lot of empty spaces. I tried to set the height of the chart, but that results in overlapping bars.

Please help,

Thank you!

Return to “Highcharts Gantt”