I need your help rechart implement.

[NeymarJohn]

Hello Everybody.
I love to use this library so that, I started to use this library in the new project.
But I have one problem in this using.
I want to use linergradient and glow effect in the areachar stroke.

This is design and my working result is below.

In this here I want to use glow effect in the line.

My code is

<AreaChart data={modifiedData} width={400} height={300}>
            <defs>
              <linearGradient id='fillGradient' x1='0' y1='0' x2='0' y2='1'>
                <stop offset='5%' stopColor='#5ee192' stopOpacity={0.4} />
                <stop offset={off} stopColor='#8884d8' stopOpacity={0} />
                <stop offset='95%' stopColor='#FF3F57' stopOpacity={0.4} />
              </linearGradient>

              <linearGradient id='lineGradient' x1='0' y1='0' x2='0' y2='1'>
                <stop offset='2%' stopColor='#5ee192' stopOpacity={0.1} />
                <stop offset='8%' stopColor='#5ee192' stopOpacity={0.3} />
                <stop offset={off} stopColor='#fff' stopOpacity={0.6} />
                <stop offset='92%' stopColor='#FF3F57' stopOpacity={0.3} />
                <stop offset='98%' stopColor='#FF3F57' stopOpacity={0.1} />
              </linearGradient>

              <linearGradient id='dashGradient' x1='0' y1='0' x2='0' y2='1'>
                <stop offset='90%' stopColor='#B5B5F8' stopOpacity={0.4} />
                <stop offset='5%' stopColor='#B5B5F8' stopOpacity={0.3} />
                <stop offset='5%' stopColor='#B5B5F8' stopOpacity={0.1} />
              </linearGradient>

              <linearGradient id='referenceLine' x1='0' y1='0' x2='0' y2='1'>
                <stop offset='8%' stopColor='#5ee192' stopOpacity={0.3} />
                <stop offset='92%' stopColor='#FF3F57' stopOpacity={0.3} />
              </linearGradient>
            </defs>
            <Area
              type='linear'
              stroke='url(#lineGradient)'
              strokeWidth='2'
              dataKey='value'
              fill='url(#fillGradient)'
              label={<CustomLabel base={baseValue} dataSize={modifiedData.length} special={SPECIAL_DUMMY_DATA} />}
              dot={<CustomDot base={baseValue} dataSize={modifiedData.length} special={SPECIAL_DUMMY_DATA} />}
            />
            <Area
              type='linear'
              stroke='url(#dashGradient)'
              dataKey='dashValue'
              strokeDasharray='3 3'
              fill='transparent'
            />
            <ReferenceLine y={0} stroke='#ffffff4d' strokeWidth={0.5} />
            <Tooltip
              isAnimationActive={false}
              animationDuration={1}
              content={<CustomTooltip base={baseValue} setChangeVal={setChangeVal} />}
            />

            <XAxis tick={false} axisLine={false}>
              <Label
                content={
                  <>
                    <text x={10} y={220} fill='#FF3F57' fontSize={10} textAnchor='left'>
                      -{2354}
                    </text>
                    <LogoUsdc x={40} y={207} />
                  </>
                }
                position='insideBottom'
              />
            </XAxis>
          </AreaChart>

      https://codesandbox.io/embed/black-glitter-8d3m3z?fontsize=14&hidenavigation=1&theme=dark
      Also this is code sandbox.
      
      Please give me a good answer.
      Thank you

[ckifer]

Converted this to a discussion because it is a question. For the glow effect you will need a shadow of some sort.

https://stackoverflow.com/questions/54112231/is-it-possible-to-create-a-glow-effect-in-svg

If you put your code into a codesandbox someone may be able to help

[NeymarJohn]

Okay. thank you.
https://codesandbox.io/embed/black-glitter-8d3m3z?fontsize=14&hidenavigation=1&theme=dark
This is my codesandbox url.
Please check and let me know correctly.
Thanks

[NeymarJohn]

I've put the codesandbox but no reply.
Can you please help me?

[ckifer]

Hi,

The stack overflow I linked has examples on how to do this. It isn't supported out of the box so anything you're doing is going to be custom SVG work similar to your gradient. In this case it will most likely be a filter.

Your example already looks really close imo