[Solved]-Highcharts pie donut with gradient-Highcharts

Highcharts only have two types of gradients, linear and radial, so you cannot solve your problem using them. That is why I start thinking how to do it and after wasting a lot of time, I decided to implement it by dividing the chart in small slices with different colors. Then I have a donut/pie chart with 100 little slices and each one has a different color.

Gradient color degraded from 0 to 100% Gradient color degraded from 0 to 60% I am developing a react-native application, so I post you the code here:

gradientColors.js

export default ['#41E500','#44E500','#47E500','#4AE500','#4DE600','#50E601','#53E601','#56E601','#59E701','#5CE702','#5FE702','#62E702','#65E802','#68E803','#6BE803','#6EE903','#71E903','#74E904','#77E904','#7AEA04','#7DEA04','#80EA05','#83EA05','#86EB05','#89EB05','#8CEB05','#8FEC06','#92EC06','#95EC06','#98EC06','#9BED07','#9EED07','#A1ED07','#A4ED07','#A7EE08','#AAEE08','#ADEE08','#B0EE08','#B3EF09','#B6EF09','#B9EF09','#BCF009','#BFF00A','#C2F00A','#C5F00A','#C8F10A','#CBF10A','#CEF10B','#D1F10B','#D4F20B','#D7F20B','#DAF20C','#DDF30C','#E0F30C','#E3F30C','#E6F30D','#E9F40D','#ECF40D','#EFF40D','#F2F40E','#F5F50E','#F8F50E','#FBF50E','#FFF60F','#FFF60F','#FFF20E','#FFEF0E','#FFEC0D','#FFE80D','#FFE50C','#FFE20C','#FFDE0C','#FFDB0B','#FFD80B','#FFD50A','#FFD10A','#FFCE0A','#FFCB09','#FFC709','#FFC408','#FFC108','#FFBE07','#FFBA07','#FFB707','#FFB406','#FFB006','#FFAD05','#FFAA05','#FFA705','#FFA705','#FF9805','#FF8906','#FF7B06','#FF6C07','#FF5D07','#FF4F08','#FF4008','#FF3109','#FF230A','#FF230A'];

ProgressChart.js

'use strict';

const Highcharts = 'Highcharts';
import { COLORS } from '@theme';
import gradientColors from './gradientColors';

const fakeData = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];

const data = [{
  y: 100,
  color: COLORS.dark_red,
  drilldown: {
    name: 'Categories',
    categories: ['A', 'B', 'C', 'D', 'E', 'F'],
    data: fakeData,
    color: COLORS.dark_red
  }
}];
const donutData = [];
const donutDataOuter = [];

const dataLen = data.length;
// Build the data arrays
for (let i = 0; i < dataLen; i += 1) {

  // add data
  const drillDataLen = data[i].drilldown.data.length;
  for (let j = 0; j < drillDataLen; j += 1) {

    if (j > 60) {
      donutData.push({
        y: data[i].drilldown.data[j],
        color: 'white',
        borderColor: 'white'
      });
      donutDataOuter.push({
        y: data[i].drilldown.data[j],
        color: 'white',
        borderColor: 'white'
      });
    } else {
      donutData.push({
        y: data[i].drilldown.data[j],
        color: gradientColors[j],
        borderColor: gradientColors[j]
      });
      donutDataOuter.push({
        y: data[i].drilldown.data[j],
        color: gradientColors[j],
        borderColor: gradientColors[j]
      });
    }
  }
}

const donutConf = {
  chart: {
    type: 'pie',
    animation: Highcharts.svg
  },
  title: {
    text: 'Equipment types (%)',
    align: 'center',
    verticalAlign: 'middle',
    floating: true,
    style: {
      color: COLORS.light_grey_2,
      fontWeight: 'bold',
      fontSize: 38
    }
  },
  plotOptions: {
    pie: {
      shadow: false,
      center: ['50%', '50%']
    },
    showCheckbox: true
  },
  tooltip: {
    formatter() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.numberFormat(this.y, 2) + ' %';
    }
  },
  legend: {
    enabled: true
  },
  exporting: {
    enabled: false
  },
  series: [
    {
      name: 'Categories',
      data: donutData,
      size: '93%',
      innerSize: '58%',
      dataLabels: {
        enabled: false
      },
      id: 'inner'
    },
    {
      name: 'Categories2',
      data: donutDataOuter,
      size: '100%',
      innerSize: '97%',
      dataLabels: {
        enabled: false
      },
      id: 'outer'
    }],
};

export default donutConf;

I have developed it very fast. So the example code above is for the 60% chart. In my final version I won't include this dirty if-else clauses I will solve it

Then in your case I recommend you to use this webpage http://www.perbang.dk/rgbgradient/ and use the number of steps that you need. For instance you can simply chose 2 from green to blue as I show you in this image. After copying the hex codes to the gradientColors variable you will be able to solve your problem.

you can use radial gradient for highcharts, but I'm afraid you would not get the filling of color as per the value.

highcharts have provided in their documentation here that radial and linear gradients can be used with highcharts.