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 (opens in a new tab)

Prop	Description	Default
`id`	`string`
`stops`	`ReactElement<GradientStopProps, FC<Partial<GradientStopProps>>>[]`	`[ <GradientStop offset="0%" stopOpacity={0.3} key="start" />, <GradientStop offset="80%" stopOpacity={1} key="stop" /> ]`
`color`	`string`
`direction`	`"vertical" \| "horizontal" \| "radial"`	`vertical`

GradientStop (opens in a new tab)

Prop	Description	Default
`offset`	`string \| number`
`stopOpacity`	`string \| number`	`1`
`color`	`string`

RadialGradient (opens in a new tab)

Prop	Description	Default
`id`	`string`
`stops`	`ReactElement<GradientStopProps, FC<Partial<GradientStopProps>>>[]`	`[ <GradientStop offset="0%" stopOpacity={0.2} key="start" />, <GradientStop offset="80%" stopOpacity={0.7} key="stop" /> ]`
`color`	`string`
`radius`	`string \| number`	`30%`