Как настроить положение названия первой категории на оси xAxis?

Question

Я пытаюсь создать довольно плотную гистограмму с графиками на оси YAXIS. Есть ли способ оставить метки полос сюжета там, где они есть, но сдвинуть метки / полосы категорий xAxis вниз, чтобы не было перекрытия?

Не повезло, корректировка pointPadding, pointWidth или общий график height.

Answer 1

Вы можете установить отрицательное значение в свойстве xAxis.min и скрыть первую метку:

xAxis: {
    type: 'category',
    min: -1,
    showFirstLabel: false
}

Демо: http://jsfiddle.net/BlackLabel/b3Lhvyue/

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

Answer 2

Я не уверен, что для достижения желаемого результата можно дополнить тики / метки / столбцы Оси на заданном конце.

Однако есть способ сместить положение меток полосы графика, чтобы они не перекрывали полосы, используя yAxis.plotBands.label.y.

Например:

Highcharts.chart('container',   {
    chart: {
      type: 'bar'
    },
    title: {
      text: '10 Virtues'
    },
    xAxis: {
      categories: [
        'Virtue 1',
        'Virtue 2',
        'Virtue 3',
        'Virtue 4',
        'Virtue 5',
        'Virtue 6',
        'Virtue 7',
        'Virtue 8',
        'Virtue 9',
        'Virtue 10'
      ],
      title: {
        text: null
      }
    },
    yAxis: {
      min: 0,
      max: 100,
      tickInterval: 25,
      title: {
        text: 'Percentile Rank'
      },
      labels: {
        format: '{value}%'
      },
      plotBands: [
        {
          color: '#b2d3f9',
          from: 0,
          to: 25,
          label: {
            text: 'Below Average',
            align: 'center',
            y: -2
          }
        },
        {
          color: '#7aacff',
          from: 25,
          to: 75,
          label: {
            text: 'Average',
            align: 'center',
            y: -2
          }
        },
        {
          color: '#4f91ff',
          from: 75,
          to: 100,
          label: {
            text: 'Above Average',
            align: 'center',
            y: -2
          }
        }
      ]
    },
    tooltip: {
      valueSuffix: '%'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      },
      series: {
        groupPadding: 0,
        shadow: false
      }
    },
    series: [
      {
        dataLabels: [
          {
            align: 'right',
            format: '{y}%'
          }
        ],
        data: [
          10,
          20,
          30,
          40,
          50,
          60,
          70,
          80,
          90,
          100
        ],
        color: '#aaaaaa',
        borderColor: '#555555',
        showInLegend: false
      }
    ]
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>