Gantt issues

[Suman SInha]

Hello,

Hope you guys are doing well.

I am facing some issues gantt chart, I have you will help me out
These are the issues:-

• I am getting a day before data
• The header bar shows years and months in the same row (2018, 2019, 2020, January). I would like it to show the years only, just like it shows when the Gantt report is initialized,. For these I have done this,

  Code: Select all

  xAxis: [{}, {
      dateTimeLabelFormats: {
        year: {
          list: ['%Y']
        }
      }
    }]
    

  but I am using angular, and I am getting error

  Type '{ list: string[]; }' is not assignable to type 'string | AxisDateTimeLabelFormatsOptionsObject'.
  Object literal may only specify known properties, and 'list' does not exist in type 'AxisDateTimeLabelFormatsOptionsObject'.

• I want both header bar and side bar to be fixed

Any help is appreciated,
Kindly regards.

[Suman SInha]

As I was going through form, I show these example
https://jsfiddle.net/zhqp5cdn/1/

In these column header is fixed, I want also row header to be fixed also

[Suman SInha]

I have tried to create demo on jsfiddle, but don't know its not working

https://jsfiddle.net/1uvx9zrs/16/

[dominik.c]

Hello Suman SInha!

We appreciate you reaching out to us!

Your demo didn't work because you used this.series for series instead of series.

Here it works: https://jsfiddle.net/BlackLabel/u3tey56w/

If it goes about your first problem, could you reproduce the demo in an online editor? You said that you're using angular, right?
Here is the basic template: https://stackblitz.com/edit/highcharts-angular-gantt

Best regards!

[Suman SInha]

Hey Dominik Chudy,

Thanks for your response

My bad I didn't see the issue

here is my updated code, https://jsfiddle.net/ta9cxLyn/24/

I m not sure to create my 1st issue, as you can see its not showing week data not date wise which come to my second issue, how can I set permanent header format, as some time it show week wise (as in demo) and some time date wise(in my code).

Also in demo I have set my side bar data fixed but also want header to be fixed

Thanks

[sebastian.h]

Hi Suman,

All you need is to add cast type in your code or create or build an interface.

Code: Select all

    xAxis: [
      {},
      {
        dateTimeLabelFormats: {
          year: {
            list: ["%Y"]
          }
        }
      }
    ] as any,

Live demo:
https://stackblitz.com/edit/highcharts- ... ntt-tyapbm

API References:
https://api.highcharts.com/gantt/xAxis. ... belFormats

Documentation:
https://www.typescriptlang.org/docs/han ... assertions

Let me know if that was what you were looking for!
Kindly regards.

[Suman SInha]

Hey Dominik,

Thanks for your response

I git it working but result is not as I am expecting

For eg https://jsfiddle.net/BlackLabel/Lztm1s83/,

Expected behaviour
When I resize the container to make it smaller
Then I see the first header, showing the year: 2018
Then I see the second header, showing the months

Actual behaviour
When I resize the container to make it smaller
Then I see the first header, showing the month: January
Then I see the second header, showing the months

I want even I resize or reload whatever, my header should be fixed, means in first header to show year and second header to be month

Kindly regards.

[Suman SInha]

As I was going through form, I show these example
https://jsfiddle.net/zhqp5cdn/1/

In these column header is fixed, I want also row header to be fixed also

How can I achieve this scenario ??

[sebastian.h]

Hi,

Thanks for your message.

The row header is calculated by the highest width label but you can change the style.
https://jsfiddle.net/BlackLabel/ec3oab1q/

To show the year instead of the month you need to do this in this way.
https://jsfiddle.net/BlackLabel/x7gyo3wt/

Code: Select all

    dateTimeLabelFormats: {
      year: {
        list: ['%Y']
      },
      month: {
        list: ['%Y']
      },
    }

Feel free to contact us if further help needed.
Regards.

[Suman SInha]

Hey Dominik,

Thanks for your response

I got it working now

Now, I need help in 2 another feature,
https://jsfiddle.net/ta9cxLyn/24/

As you can see in demo,
1. side bar is fixed, I also want to fixed header i.e is date bar
2. I want my container to be fixed for 1 week data and rest data come horizontal scroll

Thanks

[pawelys]

Hello, thanks for the reply.
I'm glad to hear, that you got your example working. I don't quite understand what are the next features, you want to implement. Could you please, try to explain better, what is your goal, or share some screenshots/ pictures of what you are trying to achieve?
Kind regards,

[Suman SInha]

Hey Dominik,

Thanks for your response

Ok my bad, my description is not clear to you

So, for point 1:- side bar is fixed, I also want to fixed header i.e is date bar
I want both scroll like this https://jsfiddle.net/ta9cxLyn/24/ and https://jsfiddle.net/mroche/1f7humpd/1/ in one

For point 2:- I want my container to be fixed for 1 week data and rest data come horizontal scroll
In this https://jsfiddle.net/ta9cxLyn/24/ as you can see data isseen in week format week 1, week 2.....

I want on load/ first time, I can see only week1 data date wise like mon, tue.... and when I scroll I can see rest week data

I hope my requirements are clear to you now

Thanks
regards

[sebastian.h]

Hi,

Thanks for the explanation.

For firtst point, you can achieve this by adding scrollbar on y axis and x axis.

Code: Select all

    scrollbar: {
      enabled: true
    }, 

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

Looking at the second point, it looks like customizing the code individually by modifying the core.
I don't found a way to the frozen the first week and show days of the week and then continue to the next week.

Best regards.