score:1

Accepted answer

It is possible, however, it is not so simple and intuitive to make it as you expect in Highcharts. Check the demo and code posted below, there you will find the solution with pointRange = 0.1, pointPlacement = -0.5, min: 0.05, max: 0.95 and tickInterval = 0.1.

Code:

Highcharts.chart('container', {
  chart: {
    width: 420,
    height: 350,
    style: {
      textAlign: 'center',
      'text-align': 'center',
    },
  },
  colors: ['#a1cbff'],
  title: {
    text: undefined,
  },
  yAxis: [{
    title: {
      text: undefined
    }
  }],
  xAxis: {
    min: 0.05,
    max: 0.95,
    tickInterval: 0.1
  },
  series: [{
    type: 'column',
    pointPlacement: -0.5,
    pointRange: 0.1,
    data: [
      [0.1, 130],
      [0.2, 110],
      [0.3, 240],
      [0.4, 150],
      [0.5, 250],
      [0.6, 190],
      [0.7, 240],
      [0.8, 220],
      [0.9, 270],
      [1, 160]
    ],
  }],
  plotOptions: {
    column: {
      pointPadding: 0,
      borderWidth: 1,
      groupPadding: 0,
      shadow: false,
    },
  },
  tooltip: {
    formatter() {
      return this.y;
    },
  },
  legend: {
    enabled: false,
  },
  exporting: false,
  credits: false,
});

Demo:
https://jsfiddle.net/BlackLabel/wtxd9y2f/

API reference:
https://api.highcharts.com/highcharts/series.column.pointRange
https://api.highcharts.com/highcharts/series.column.pointPlacement


Related Query

More Query from same tag