Background size gradients using highcharts

Question

I am using highcharts with an angular component, along with that I am making a column chart using the following data.

  accessGroupUsageData: AnalyticsStatus[] = [
    { y: 430, name: 'Public', percent: Math.round((430 / 4185) * 100) }, 
    { y: 430, name: 'Executivers', percent: Math.round((430 / 4185) * 100) },
    { y: 400, name: 'Convention Grounds', percent: Math.round((400 / 4185) * 100) },
    { y: 400, name: 'Group 4', percent: Math.round((400 / 4185) * 100) },
    { y: 400, name: 'Group 5', percent: Math.round((400 / 4185) * 100) },
    { y: 350, name: 'Group 6', percent: Math.round((350 / 4185) * 100) },
    { y: 350, name: 'Group 7', percent: Math.round((350 / 4185) * 100) },
    { y: 300, name: 'Group 8', percent: Math.round((300 / 4185) * 100) },
    { y: 250, name: 'Group 9', percent: Math.round((250 / 4185) * 100) },
    { y: 250, name: 'Group 10', percent: Math.round((250 / 4185) * 100) },
    { y: 225, name: 'Group 11', percent: Math.round((225 / 4185) * 100) },
    { y: 200, name: 'Group 12', percent: Math.round((200 / 4185) * 100) },
    { y: 200, name: 'Group 13', percent: Math.round((200 / 4185) * 100) }
  ]
// here are the colors
  gradientColors = {
    purple: 'var(--analytics-gradient-purple, #ffffff)', //#9379F9
    blue: 'var(--analytics-gradient-blue, #ffffff)', // #56A5FB
    lightblue: 'var(--analytics-gradient-lightblue, #ffffff)' // #35BDDC
  }

What I am trying to achieve accesssGroupUsageData[0] to be purple to the light blue, repeating down for each column to be reduced in the purple color that is above 50%. Below 50% height along with anything below 50% heigh to go from blue to light blue.

First try that resulted in all columns going from purple to light blue.

series: [
        {
          name: undefined,
          legendSymbol: undefined,
          color: {
            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
            stops: [
              [0, this.gradientColors.purple], // start 
              [0.5, this.gradientColors.blue], // middle
              [1, this.gradientColors.lightblue] // end
            ],

          },
          type: 'column',
          borderRadius: 0,
          borderWidth: 0,
          zIndex: 3,
          stickyTracking: false,
          tooltip: {
            followPointer: false,
          },
          data: this.chartDataSource
        }
      ]

Second try that resulted in all columns being light blue (and manually changing to percent calculate * 100 still left the color as light blue) using the following function:

calculateGradientStops(data: number[]): Highcharts.GradientColorObject {
    const max = Math.max(...data);
    const stops: Highcharts.GradientColorStopObject[] = [];

    data.forEach(value => {
      const percent = value / max;
      if (percent <= .5) {
        stops.push([percent, this.gradientColors.purple]);
      } else {
        stops.push([percent, this.gradientColors.blue]);
      }
    });

    console.log(stops)

    return {
      linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
      stops: stops
    }
  }

As well as the above I was looking at using styledMode=true but that results in a bit more refactor than am able to do at the moment.

Links: This is what it currently does - https://imgur.com/a/GOtFOKC This is what I want to achieve - https://imgur.com/a/CkDIdte

Answer 1

So basically you want to achieve something like this?

Highcharts.chart('container', {
  series: [{
    type: 'column',
    color: {
      linearGradient: [0, 0, 0, 300],
      stops: [
        [0, 'red'],
        [0.5, 'orange'],
        [1, 'green']
      ]
    },
    data: [2, 5, 9, 3, 6, 5]
  }]
});

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

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

Demo: https://jsfiddle.net/BlackLabel/4hbxn38v/
API: https://api.highcharts.com/class-reference/Highcharts.GradientColorObject