Highcharts: метка xAxis над гистограммой в горизонтальных гистограммах

Question

Я пытаюсь установить метки над баром и использую свойство xAxis.label.x для этого. Тем не менее, я заметил, что расстояния между полосой и этикеткой немного отличаются. Если вы посмотрите на скрипку, (я попытался расположить метки как можно ближе), некоторые из них имеют меньшее расстояние, чем другие. Это вопрос округления? Есть ли способ избежать этого? Пожалуйста, порекомендуйте.

https://jsfiddle.net/sabira/fmnysehq/32/

plotOptions: {
  bar: {
            pointPadding: 0,
  }
},

xAxis: {
    categories: ['2010', '2011', '2012', '2013', '2014'],
    labels: {
                    x: 0,
        align: 'left',
        reserveSpace: false,
        y: -20,
    },
        min: -0.2,
      max: 4.2,
    tickWidth: 0
},
yAxis: {
visible: false
},

series: [{
    data: [39.9, 71.5, 106.4, 23, 67],
    pointPlacement: 'on',
    dataLabels: {
        enabled: true
    }
}]

});

Answer 1

Если вы удалите опцию pointPlacement из серии, она будет работать нормально.

Highcharts.chart('container', {
  chart: {
    type: 'bar',
  },

  xAxis: {
    categories: ['2010', '2011', '2012', '2013', '2014'],
    labels: {
      x: 0,
      align: 'left',
      reserveSpace: false,
      y: -12,
    }
  },


  series: [{
    data: [39.9, 71.5, 106.4, 23, 67],
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Answer 2

, что, похоже, является проблемой рендеринга в Highcharts (как и многие другие), однако вы можете получить лучший результат, используя следующие настройки:

Highcharts.chart('container', {
    chart: {
        type: 'bar',
    },

    title: {
        text: 'Default title',
        margin: 50
    },

    credits: {
        enabled: false
    },

    legend: {
        enabled: false
    },
    plotOptions: {
      bar: {
                pointPadding: 0,
      }
    },

    xAxis: {
        categories: ['2010', '2011', '2012', '2013', '2014'],
        labels: {
            x: 5,
            align: 'left',
            reserveSpace: false,
            y: 33,
        },
            min: -0.2,
          max: 4.2,
        tickWidth: 0
    },
    yAxis: {
    visible: false
    },

    series: [{
        data: [39.9, 71.5, 106.4, 23, 67],
        pointPlacement: 'between',
        dataLabels: {
            enabled: true
        }
    }]
});

Надеюсь, это поможет:)