How to align the x-Axis name label to the end of the x-Axis

I am struggling with the alignment of the x-axis label.

• What I currently have is the label to the right of the end of the x-axis: see (1)
• I'd like to have this label below the x-axis and aligned to the end of the x-axis: i.e. so that the right side of the label is always at the end of the x-axis: see (2)

I am using this example - and add some code for the axis-name:

xAxis: {
    name: 'axisName',
    //nameGap: -100,
    nameTextStyle: {
        fontSize: 18,
        backgroundColor: 'red',
        rich: {
            //position: 'right',
            //verticalAlign: 'bottom',
            //textVerticalAlign: 'bottom'
            
        }
    }

I am not sure where to start. I've tried multiple align/nameGap/rich options, but couldn't find a solution.

Related:

• #9276 axis align option ignored

Now that echarts bug #8444: axis align option ignored has been fixed (since 4.3.0), we can make this work

JsFiddle example

The horizontal aligment is easy and works as expected:

• nameLocation: 'end'
• nameTextStyle.align: 'right'
• set nameGap=0: the default is 15 and would move the label too far to the right

These vertical alignment settings work as expected

• verticalAlign: 'top'
• padding: [30, 0, 0, 0]: set top-padding to move the text down

  xAxis: {
    name: '123456789123456789',
    nameLocation: 'end',
    // the default nameGap=15 would move the text to the right
    nameGap: 0,
    nameTextStyle: {
      align: 'right',
      verticalAlign: 'top',
      /**
       * the top padding will shift the name down so that it does not overlap with the axis-labels
       * t-l-b-r
       */
      padding: [30, 0, 0, 0],
    }
  }