Skip to Content
Docs⚙️ ⏐ UtilsGradient

Gradient

Gradients in REAVIZ allow you to add gradient styles to various charts, enhancing the visual appeal and providing a more dynamic look.

Types supported by reaviz:

  • Linear Gradient - Creates a gradient that transitions along a straight line.
  • Radial Gradient - Creates a gradient that radiates from a central point outward in a circular pattern.

Where to use:

  • Enhance Visual Appeal: Ideal for adding a visually appealing gradient effect to your charts.
  • Differentiate Data: Useful for distinguishing different data series or highlighting specific areas of a chart.
  • Improve Aesthetics: Great for improving the overall aesthetics of your data visualizations.

Examples

Linear Gradient

Radial Gradient

API

Gradient 

NameTypeDefault
idstring

Unique id for the gradient. Set internally by the parent component.

stopsReactElement<GradientStopProps, FC<Partial<GradientStopProps>>>[]

Gradient stops to render.

`[<GradientStop offset="0%" stopOpacity={0.3} />, <GradientStop offset="80%" stopOpacity={1} />]`
colorstring

Base color of the gradient.

direction"vertical" | "horizontal" | "radial"

Direction of the gradient.

'vertical'

GradientStop 

NameTypeDefault
offsetstring | number

SVG offset attribute for the stop.

stopOpacitystring | number

SVG stop-opacity attribute for the stop.

1
colorstring

Stop color.

RadialGradient 

NameTypeDefault
idstring

Unique id for the gradient. Set internally by the parent component.

stopsReactElement<GradientStopProps, FC<Partial<GradientStopProps>>>[]

Gradient stops to render.

`[<GradientStop offset="0%" stopOpacity={0.2} />, <GradientStop offset="80%" stopOpacity={0.7} />]`
colorstring

Base color of the gradient.

radiusstring | number

Radius of the gradient.

'30%'
Last updated on
GlowGridlines