Change the font size and orientation of Highcharts Gantt X-axis labels

Question

I am trying to create a scheduling Gantt. I've based this gantt off of the Resource Management example. Lots of good stuff so far! I'm having a few problems, which I will make separate posts for.

The last problem I'm having (so far) is that I need to show the hours of the day as part of my x-axis. When I get more than 2 days worth of data in the chart, some or all of that x-axis label starts to disappear, leaving blank values instead. I'd like to turn the text orientation vertical and maybe make the font smaller.

In the fiddle below, there is 4 days worth of data. No matter how small I make the font, the hour value is blank. If I go through the data and remove all of the entries that contain 02-06 and 02-07, that makes the gantt only show 2 days worth of data, and the hour labels appear very small.

The label rotation seems to have no effect. Ultimately, I need to show the time of day on that axis...This is my preferred way, showing each hour. But other solutions are welcome. Maybe only showing every other hour or even every 4 hours.

Here's the fiddle showing missing labels: https://jsfiddle.net/eddiem9/n2v740tj/7/ and here's a fiddle showing less data so the labels appear https://jsfiddle.net/eddiem9/h9qw5rsj/22/

                chart = Highcharts.ganttChart('container', {
                series: series,

                plotOptions: {
                    series: {
                        color: '#FF0000'
                    }
                },
                scrollbar: {
                    enabled: true
                  },
                title: {
                    text: 'Irrigation Schedule',
                    style: {
                        color: '#000000',
                        fontWeight: 'bold',
                        fontSize: '24px'
                    }
                },

                //rangeSelector: {
                //  enabled: true,
                //  selected: 0
                //},
                tooltip: {
                    pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
                },
                xAxis:
                [{
                        labels: {
                            format: '{value:%H}', // hour of the day 
            rotation: -90,
                align: 'center',
                reserveSpace: true,
            style: {
                fontSize: '8pt',
            }
                        },
                        tickInterval: 1000 * 60 * 60, // HOUR
                    }, {
                        labels: {
                            format: '{value:%B %e}' // day name of the week
                        },          
                        tickInterval: 1000 * 60 * 60 * 24, // Day
                    }

                ],
                yAxis: {
                    type: 'category',
        max: series.length-1,
                    grid: {
                        columns: [{
                                title: {
                                    text: 'Pump'
                                },
                                categories: map(series, function (s) {
                                    return s.PumpName;
                                })
                            }, {
                                title: {
                                    text: 'Zone'
                                },
                                categories: map(series, function (s) {
                                    return s.IrrigationZoneName;
                                })
                            },{
                                title: {
                                    text: 'Status'
                                },
                                categories: map(series, function (s) {
                                    return s.CurrentStatus;
                                })
                            }
                        ]
                    }
                }

            }
            )

Thanks in advance!

Eddie

I am afraid that it is impossible to achieve without setting the fixed width for the chart. Without it, there is no enough space to render those labels, see: jsfiddle.net/BlackLabel/c0zdkqwe — Sebastian Wędzel

Riku Hiltunen Riku Hiltunen · Accepted Answer · 2020-12-09T15:44:21

I was having the same problem myself,

You need to give the xAxis a property label through styles.

You can use the same for orientation, below gives the idea (here we change the text size)

xAxis: [{
//Like this
     labels: {
       style: {
         fontSize: '9'
         }
//.....CODE CONTINUES
      }],

Change the font size and orientation of Highcharts Gantt X-axis labels

1 Answers