How can create the following column chart at highchart?

I am looking for creating a column chart at highchart as the following picture: . In this picture, each column has a linear gradient background color and a start and end value is defined for each column. Also,The raw chart can be found at the following link :

chart raw sample:https://jsfiddle.net/v091rnj5/20/

The values between start and end of each column, and linear gradient of each column is most important to impelement.

To apply the gradient, you can use color-axis feature with the defined colorKey as x for the series.

  series: [{
    ...,
    colorKey: 'x'
  }],
  colorAxis: {
    visible: false,
    stops: [
      [0.1, '#ba0403'],
      [0.5, '#fae5e4'],
      [0.5, '#bce0bf'],
      [1, '#1b7520']
    ]
  }

To show x-axis labels at the beginning of columns, set pointPlacement: 'between'.

  series: [{
    type: 'column',
    pointPlacement: 'between',
    pointPadding: 0,
    groupPadding: 0,
    ...
  }],
  xAxis: {
    tickInterval: 1,
    labels: {
      x: 5
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/0okqmwrv/

API Reference:

https://api.highcharts.com/highcharts/colorAxis

https://api.highcharts.com/highcharts/xAxis