888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

xAxes dates seem not true representation of the actual RangeSelector input fields

Hi, I am playing around with the two xAxis of the Gantt charts package. However, I can't seem to get the alignment of the dates right?

In the Range selecter input fields, I can verify the actually selected dates. However, from the two xAxis labels, I can never get a true representation of those data?

I am playing with the following code:

Code: Select all

xAxis: 


 [{
        currentDateIndicator: {
            label: {
                format: 'Today (%b %d, %Y)',
                y: -100, align: 'center', verticalAlign: 'top',
            },
        },
        min: today.getTime() - (10 * day),
        max: today.getTime() + (45 * day), 
            grid: {
                cellHeight: 30,
      },


    labels: {
      y:-25,
      format: '{value}',
            formatter() {
            const unitName = this.tickPositionInfo.unitName;
                const format = unitName === 'day' ? '%d' : this.dateTimeLabelFormat;

                return Highcharts.dateFormat(format, this.value )
              },
          },
}, 

{
grid: {
cellHeight: 30,
},
    labels: {
      formatter() {
                return Highcharts.dateFormat(this.dateTimeLabelFormat + '', this.value )
            },
    },
}],
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: xAxes dates seem not true representation of the actual RangeSelector input fields

Sorry, never mind. It is because I was confused. The xAxes dates are actually correct as well.

I overlayed the navigator on the xAxes dates, which is why it looks a bit as if they are not correct.
Is there any sort of way to make the navigator work together with the xAxes, such that you can overlay it and it will not give you that false impression?
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: xAxes dates seem not true representation of the actual RangeSelector input fields

Perhaps I should use the navigator's own dateTime Labels? Instead of overlaying (half opacity) the navigator on top of the existing x-axes date time labels?

I was doing as such:

Code: Select all

 navigator: {top: 84,
        enabled: true,
        height: 15,
    xAxis: {
            dateTimeLabelFormats: {
                day: '⠀',
                week: '⠀',
                month: '⠀',
                year: '⠀'
            },
        },
To create no labels for the navigator.

How could I use week indicators for the navigator please?
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: xAxes dates seem not true representation of the actual RangeSelector input fields

Hi again @888ba8 !

It would be really helpful if you could provide live demo of the issue. From the description, I believe this is the case: https://jsfiddle.net/BlackLabel/wgLfxqr3/ ? Correct me please, if I'm wrong.
Perhaps I should use the navigator's own dateTime Labels?
That's correct. And that is the reason why Navigator has it's own xAxis, with labels. Use this, for example like this: https://jsfiddle.net/BlackLabel/wgLfxqr3/1/
How could I use week indicators for the navigator please?
Example for you: https://jsfiddle.net/BlackLabel/wgLfxqr3/2/

Code: Select all

		
		xAxis: {
			... 
			labels: {
				format: 'W{value:%W}',
				...
			}
		}
Paweł Fus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: xAxes dates seem not true representation of the actual RangeSelector input fields

Thanks Fusher. I am very excited about your reply, but if you look at https://jsfiddle.net/BlackLabel/wgLfxqr3/1/ you can see what I mean when you see the attached screenshot, which I made from that JSFiddle in full-screen.

Image

The xAxis at the top of the chart, below the navigator is showing the leftmost part of week 13. However, there is a mismatch with the navigator, as the navigator's xAxis is showing a large chunk on the left side of week 13 selected.

How to prevent this mismatch?

There is the same mismatch in your last JSFIddle https://jsfiddle.net/BlackLabel/wgLfxqr3/2/ Please see the screenshot:

Image

The navigator shows week 34 selected, while the main chart's xAxis only begins at week 35.

If the mismatch can not be prevented, I would rather have no labels at all on the Navigator, to avoid confusion? Since they are not true representation of the actual main chart's xAxis.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: xAxes dates seem not true representation of the actual RangeSelector input fields

Hi 888ba8,

Thanks for the message and explanation.

When you have changed the labels to weeks, the navigator bar still shows the vertical line in relation to the month.
Would you like to set these line relative to the weeks?

Best regards.
Sebastian Hajdus
Highcharts Developer
888ba8
Posts: 44
Joined: Mon Dec 21, 2020 11:18 am

Re: xAxes dates seem not true representation of the actual RangeSelector input fields

Hi Sebastian. I see. That sounds interesting, it could be useful. It could probably remove the confusion!

Could you make an example please?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: xAxes dates seem not true representation of the actual RangeSelector input fields

Hi,

Yes, there are two options that you need to set to change tick in the navigator to week.
There are navigator.xAxis.dateTimeLabelFormats and navigator.xAxis.units.

Code: Select all

      dateTimeLabelFormats: {
        week: {
          list: ['Week %W', 'W%W']
        },
      },
      units: [
        [
          'week',
          [1]
        ]
      ],
Live demo:
https://jsfiddle.net/BlackLabel/swyzgvpf/

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

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Gantt”