Как отобразить категории xAxis для каждого графика в библиотеке Bar-Highcharts?

Question

Я хочу показать свои категории в верхней части каждой гистограммы. нравится изображение. для этого я установил опцию гистограммы, как показано ниже, без метки категорий xAxis.

options: {
            title: null,
            chart: {
              type: 'bar'
            },
            colors: ['#9696b2', '#ff058d'],
            xAxis: {
              categories: ['Tokyo', 'Fukuoka', 'Hiroshima', 'Osaka', 'Nagoya'],
              visible: false,
            },
            yAxis: {
              visible: false,
            },
            tooltip: {
              valueSuffix: ' '
            },
            plotOptions: {
              bar: {
                dataLabels: {
                  enabled: true
                }
              }
            },
            legend: {
              enabled: false
            },
            credits: {
              enabled: false
            },
series: [{
              name: 'Compliant',
              data: [1300, 1121, 1700, 1121, 700]
            }, {
              name: 'Non-Compliant',
              data: [60, 30, 50, 20, 0]
            }]
          }

как я могу сделать это со сложенными горизонтальными полосами?

Answer 1

Вы можете выровнять метки по левому краю и расположить их по x и y свойствам:

xAxis: {
    ...,
    lineWidth: 0,
    labels: {
        align: 'left',
        x: 0,
        y: -24
    }
}

---

Демонстрационная версия: http://jsfiddle.net/BlackLabel/6m4e8x0y/4767/

Справочник по API: https://api.highcharts.com/gantt/xAxis.labels