ECharts Xaxis name vertical position at top

Question

my code in echarts is:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    verticalAlign: 'left',
    axisLabel: {
      inside: true,
    },
    name: 'wow',
    nameLocation: 'start',
     nameGap: 5,
    nameTextStyle: {
      align: 'end',
      verticalAlign: 'bottom',
      fill: '#888',
      fontSize: 14,
      color: 'white',
      backgroundColor: 'gray',
      padding: [8, 6, 4, 6],
      borderRadius: 6,
    },
   
  },
  yAxis: {
    type: 'value',
    position: 'right',
    
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      
    }
  ]
};

I would like to have the Xaxis label name ('wow') to top of the graph, is it possible to have control on Y ? I tried padding, align and nameGap, no way. I can't use the name with the yAxis because I want the Y ticks show at right, and the name at left of the graph.

here the test: on echarts sandbox on codedandbox

Answer 1

You can specify a second invisable xAxis and move it to the top:

xAxis: [
    {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        verticalAlign: 'left',
        axisLabel: {
            inside: true
        }
    },
    {
        type: 'category',
        name: 'wow',
        nameLocation: 'start',
        nameTextStyle: {
            align: 'end',
            verticalAlign: 'bottom',
            fill: '#888',
            fontSize: 14,
            color: 'white',
            backgroundColor: 'gray',
            padding: [8, 6, 4, 6],
            borderRadius: 6
        },
        axisLine: { show: false }
    }
]

Here is an example.