Highcharts linearGradient not working (react-highcharts)

Question

series: [
          {
            name: 'Order Data',
            lineWidth: 4,
            data: [
              5,
              50,
              10,
              45,
              10,
              30,
              {
                y: 40,
                marker: {
                  enabled: true,
                  symbol: 'circle',
                  radius: 1,
                  lineWidth: 10,
                  lineColor: 'var(--green100)',
                },
              },
            ],
            color:"var(--green100)",
            fillColor: {
              linearGradient: { x1: 1, y1: 2, x2: 0, y2: 1 },
              stops: [
                [0, '#86CB62'],
                [1, 'var(--green50)'],
              ],
            },
            dashStyle: 'solid',
          },
        ],
        plotOptions: {
          spline: {
            marker: {
              enabled: false,
            },
          },
          area :{
            stacking:'normal'
          }
        },

its my chart using highcharts

i tried all ways to make my chart data background linear gradient,above code for my react application but the linear gradient background not showing

Answer 1

You haven't said what is the type of your series. By the fact that your plotOptions has the properties spline and area, but there's only one series, I presume that you intended to have the type: areaspline (type: area doesn't support spline smoothing nor does type: spline support color filling), but its plotOptions are combined:

plotOptions: {
    areaSpline: {
        marker: {
            enabled: false,
        },
        stacking: 'normal'
    }
}

The only other problem in your code is that the four coordinates (x1, x2, y1, y2) of the linearGradient object, should be in the interval [0, 1], as per the docs on colors or on LinearGradientColorObject:

Start position (x1, y1) and end position (x2, y2) are relative to the shape, where 0 means top/left and 1 is bottom/right.

Thus, I changed your values to

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

for a bottom-left to top-right gradient.

Here's a vanilla js snippet with your code. I don't know where do you have the --green100 and --green50 color variables from, I defined them explicitly to some rather bluish shades to get a good contrast; in any case, there's no problem with using css var colors if they are defined in the scope where they are used; otherwise they are replaced with black.

Highcharts.chart('container', {
    series: [
        {
            type: 'areaspline',
            name: 'Order Data',
            lineWidth: 4,
            data: [
                5,
                50,
                10,
                45,
                10,
                30,
                {
                    y: 40,
                    marker: {
                        enabled: true,
                        symbol: 'circle',
                        radius: 8,
                        lineWidth: 3,
                        fillColor: 'rgba(0,0,0,0)',
                        lineColor: 'var(--green100)',
                    },
                },
            ],
            color:"var(--green100)",
            fillColor: {
                linearGradient: { x1: 0, y1: 1, x2: 1, y2: 0 },
                stops: [
                    [0, '#86CB62'],
                    [1, 'var(--green50)'],
                ],
            },
            dashStyle: 'Solid',
        },
    ],
    plotOptions: {
        areaspline: {
            marker: {
                enabled: false,
            },
            stacking: 'normal'
        }
    }
});

:root {
    --green100: #0BB;
    --green50: #078;
}

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

<div id="container" style="height:400px;"></div>

The same with React, in a stackblitz that's a fork of the highcharts starter example with typescript.