Xaxis AutoRotation and dateTimeLabelFormat

[volmax]

Hi,

I'm having a couple of problems getting the Gantt chart to do what I need it to.

1)
I'm using the Gantt chart to visualize file statuses for items in my app. According to the doc (https://api.highcharts.com/gantt/xAxis. ... toRotation), the Xaxis labels are supposed to rotate when overlapping. That is not happening no matter which parameters I set.

This is the result I'm getting when using zoom - the labels are cut showing "..." instead of rotating 45 degrees.
https://imgur.com/a/VjCK3Y2

Fiddle:
https://jsfiddle.net/larsathle/ze5h73kc/13
(Just zoom a couple of times to replicate the situation in the image)

Am I missing something or is this simply not possible?

2)
Setting dateTimeLabelFormat using list: [] as it says in the doc does not work when using the component from TypeScript. This worked in v6.2.0, but stopped working after upgrading to 8.2.0.

dateTimeLabelFormats: {
hour: {
list: ['%H:%M', '%H'],
}
}

This results in the message:
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'.ts(2322)
highcharts.d.ts(4312, 5): The expected type comes from property 'day' which is declared here on type 'AxisDateTimeLabelFormatsOptions'

Is there any other way to set this to be able to customize this?

Thanks in advance,
Lars

[sebastian.h]

Hi Lars,

Welcome to our forum and thanks for contacting us with your question!

1. I can't see the image file with an undesirable state, you can add it again.
I understood what do you want to achieve, something like on these highcharts examples?
https://api.highcharts.com/highcharts/x ... toRotation

I tested autoRotation and I don't found a way to rotate xaxis, but I need more time to dig into this topic.

2. When you use this variant, there is working?

Code: Select all

dateTimeLabelFormats: {
    hour: '%H:%M',
}

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

I'm waiting for your answers, feel free to ask.
Kindly regards.

[volmax]

Hi Sebastian,

Thanks for your reply.

1)
Here is the image again, properly added this time:


You have correctly understood what I'm trying to achieve. I'm open to other ways of showing labels that makes them readable, but I guess that the rotation is the easiest way to avoid overlap.

2)
Correct, using one single string value works. These are the TypeScript definitions:

Code: Select all

export interface AxisDateTimeLabelFormatsOptions {
    day?: (string|AxisDateTimeLabelFormatsOptionsObject);
    ...
}
export interface AxisDateTimeLabelFormatsOptionsObject {
    main?: string;
    range?: boolean;
}

I'm thinking the interface definitions need to be updated to allow for the list syntax?

Regards,
Lars

[sebastian.h]

Hi Lars,

1. Unfortunately there is no option to rotate labels on xaxis.
This is probably a documentation bug, there is no gantt label positioning option.
I checked the core (highcharts/ts/Core/Axis/GridAxis.ts) and can't found a possibility for this.
If you want to rotate tick you need to obtain an away to get all tick and rotate them like svg elements.

2. Probably yes, we need to update interface definitions for the list syntax.
You could report this as a bug on our github.

Feel free to ask any further questions!
Kindly regards.

[volmax]

Hi Sebastian,

I got it working with css:

Code: Select all

    svg > g.highcharts-axis-labels.highcharts-xaxis-labels.highcharts-grid-axis > text {
        transform: rotate(-45deg);
        transform-box: fill-box;
        transform-origin: bottom;
        text-overflow: none;
    }

If this won't be supported in the component, you might want to update the documentation.

Thanks for your help.

Regards,
Lars

[sebastian.h]

Hi Lars,

Thanks for sharing your solution, maybe it will help someone else.

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