How to change format of the upper xAxis Label?

Question

How can I change the format of the "upper" xAxis Label as shown in the picture?

I have already figured out how to change the weekday labels below (T, W, T, etc.) with the following snippet (for weeks, code placed within the xAxis):

dateTimeLabelFormats: {
    week: {
        list: ['Kalenderwoche %W', 'KW%W']
    }
},

Existing example to play around: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/gantt/demo/resource-management

score 1 · Answer 1 · answered Dec 04 '20 at 08:18

You have 2 xAxis. So you should provide dateTimeLabelFormats array.

axis with the lower index will be placed lower.

So, your xAxis should be

  xAxis: [{
      currentDateIndicator: true,
      dateTimeLabelFormats: {
        day: {
          list: ['%A, %e. %B', '%a, %e. %b', '%E']
        }
      }
    },
    {
      dateTimeLabelFormats: {
        week: {
          list: ['Kalenderwoche %W', 'KW%W']
        },
        month: {
          list: ['Monat%W', 'KW%W']
        }
      }
    }
  ],

score 1 · Answer 2 · answered Dec 04 '20 at 08:19

According to this page, the way to do it is to set the x-axis to be an array of objects, with each representing a level of the x-axis (day, week, month, etc.). In this case: https://jsfiddle.net/vm5t78j3/

    xAxis: [{
        currentDateIndicator: true,
    }, {
      labels: {
        format: '{value:%W}'
      },
    }],

How to change format of the upper xAxis Label?

2 Answers2