Highcharts 柱形图，带目标和颜色渐变

Question

Is below chart possible in highchart

1. Column with high, low and target
2. Color gradient with denser on target and lighter away
3. Data table for low, high and target

Managed to get some bits, but not full functionality

https://jsfiddle.net/z9u5hgod/2/

TIA

[
  
  {
   type: 'bullet',
   dataLabels: [
   { format: '{point.y}' } ,
   
   {format: '{point.target}',
        inside: true},
   
   {
    inside: true,
    verticalAlign: 'bottom',
    align: 'center',
    format: '{point.low}'
   }
   ],
    data: [
    {
      low: 250,
      y: 1650,
      target: 750,
      color: {
        linearGradient: [0, '70%', 0, '50%'],
          stops: [
            [0, 'green'],
            [1, 'orange']
          ]
      }
    }, 
    {
      low: 100,
      y: 2000,
      target: 1500
    }
    ]
  }, 
  
  {
    data: [{
     low: 600,
      y: 2350,
      target: 2100
    }, {
     low: 450,
      y: 1700,
      target: 1250
    }]
  }]

Answer 1

Response from higcharts developer

https://jsfiddle.net/BlackLabel/xbvp8he7/

const chart = Highcharts.chart('container', {
  chart: {
    type: 'bullet',
    events: {
      load() {
        const firstSeries = this.series[0];

        firstSeries.data.forEach(point => {
          const {
            low,
            y,
            target
          } = point,
          gradientPoint = (y - target) / (y - low);

          point.update({
            color: {
              linearGradient: {
                x1: 0,
                x2: 0,
                y1: 0,
                y2: 1
              },
              stops: [
                [0, 'blue'],
                [gradientPoint, 'purple'],
                [1, 'blue']
              ],
            }
          })
        })
      }
    }
  },
  plotOptions: {
    series: {
      pointPadding: 0.2,
      groupPadding: 0.1,
      targetOptions: {
        borderWidth: 0,
        height: 3,
        color: 'red',
        width: '100%'
      }
    }
  },
  xAxis: {
    categories: ['Alex ar', 'Cairo ar']
  },
  series: [

    {
      type: 'bullet',
      dataLabels: [{
        enabled: true,
      }, {
        enabled: true,
        verticalAlign: 'top',
        align: 'center',
                color: 'white',
        useHTML: true,
        formatter() {
          const point = this.point,
            target = point.targetGraphic,
            targetY = target.getBBox().y - point.shapeArgs.y - 25;


          return `
                        <div class="datalabelInside" style="position: relative; top: ${targetY}px">${point.target}</div>
                    `;

        }
      }, {
        verticalAlign: 'bottom',
        inside: true,
        y: 20,
        format: '{point.low}',
        enabled: true
      }, ],
      data: [{
          low: 250,
          y: 1650,
          target: 750
        },
        {
          low: 100,
          y: 2000,
          target: 1500
        }
      ]
    },

    {
      data: [{
        low: 600,
        y: 2350,
        target: 2100
      }, {
        low: 450,
        y: 1700,
        target: 1250
      }]
    }
  ],
  tooltip: {
    pointFormat: '<b>{point.y}</b> (with target at {point.target})'
  }
});