Echarts Bar Chart Axis Label on Top and Bottom

Question

I would like to display labels on the top x-axis and bottom x-axis in my bar charts. I am trying to express the bar as a range between two opposing values, for example: Energetic vs Laid Back.

Does anyone know how to do this in echarts? Ideally it would be something like below, but I haven't been able to find anything:

option = {
  ...

  xAxis: [{
    type: "category",
    data-top: ["happy", "energetic", "early-bird"],
    data-bottom: ["melancholy", "laid-back", "night-owl"]
  }],

  ...
}

I would expect there to be a way to do it with the formatter option, but I have no idea how.

Your help is greatly appreciated!!

Answer 1

You can use secondary x-axis to display labels on top and bottom of the chart

Please refer the chart option below,

option = {
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
        type: 'category',
        data: ['Mon Top', 'Tue Top', 'Wed Top', 'Thu Top', 
        'Fri Top', 'Sat Top', 'Sun Top']
    }],
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};

The chart should displayed as,

Answer 2

In ECharts v5 you can use the position attribute for top and bottom. When doing so, be sure to set the min and max values the same and hide splitLine on one axis.

Example:

xAxis: [
  {
    type: 'value',
    position: 'top',
    min: 0,
    max: 1000,
  },
  {
    type: 'value',
    position: 'bottom',
    min: 0,
    max: 1000,
    splitLine: {
      show: false,
    },
  },
]