Gradient & Mask

SVG gradient fills and pattern masks for chart elements. Apply to areas, bars, arcs, and other shapes.

Import

import { Gradient, GradientStop, RadialGradient, Mask, Stripes } from 'reaviz';

Gradient Props

GradientStop Props

RadialGradient Props

Mask Props

Stripes Props

Extends Mask. Renders a 45-degree striped pattern.

Default Gradient

// Most chart elements include <Gradient /> by default
<Area gradient={<Gradient />} />

Custom Gradient Stops

<Area
  gradient={
    <Gradient
      stops={[
        <GradientStop offset="0%" stopOpacity={0.1} />,
        <GradientStop offset="50%" stopOpacity={0.5} />,
        <GradientStop offset="100%" stopOpacity={1} />,
      ]}
    />
  }
/>

Horizontal Gradient

<Gradient direction="horizontal" />

Radial Gradient (for radial charts)

import { RadialArea, RadialGradient, GradientStop } from 'reaviz';

<RadialArea
  gradient={
    <RadialGradient
      stops={[
        <GradientStop offset="0%" stopOpacity={0.1} />,
        <GradientStop offset="80%" stopOpacity={0.3} />,
      ]}
    />
  }
/>

Striped Mask

<Area mask={<Stripes />} />
<Bar mask={<Stripes />} />

Combined Gradient + Mask

<Area
  mask={<Stripes />}
  gradient={
    <Gradient
      stops={[
        <GradientStop offset="10%" stopOpacity={0} />,
        <GradientStop offset="80%" stopOpacity={1} />,
      ]}
    />
  }
/>

No Gradient

<Area gradient={null} />
<Bar gradient={null} />