react hightchart: add gradient shading to the points

Question

In classic highcharts it is possible to add a gradient coloring to the points:

Highcharts.setOptions({
    colors: Highcharts.getOptions().colors.map(function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.color(color).brighten(-0.2).get('rgb')]
            ]
        };
    })
});

but when I try to use this code in React & Typescript I get an error:

TypeScript error in demo/src/charts/ChartStatisticsScatter3D/ChartStatisticsScatter3D.tsx(43,13): Type '{ radialGradient: { cx: number; cy: number; r: number; }; stops: (number | ColorType)[][]; }[]' is not assignable to type 'string[]'.
Type '{ radialGradient: { cx: number; cy: number; r: number; }; stops: (number | Highcharts.ColorType)[][]; }' is not assignable to type 'string'. TS2322

    41 |         // === сформировать отображение для графика ===
    42 |         Highcharts.setOptions({
  > 43 |             colors: Highcharts.getOptions().colors.map(function (color) {
       |             ^
    44 |                 return {
    45 |                     radialGradient: {
    46 |                         cx: 0.4,

Please advise how to make this code work!

Answer 1

I found a solution

I had to explicitly show the type of returned data instead of 'string' and specify 'any'.

for example, in this way:

    const colors: any = Highcharts.getOptions().colors?.map(function(color: string) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });

    Highcharts.setOptions({
        colors: colors
    });