AreaRange (Component)

The AreaRange component takes a PointsArray prop with upper and lower bounds (y and y0), as well as options for styling/animating, and returns a Skia Path element to draw a shaded area between two bounds. This is commonly used for visualizing error bars, confidence intervals, or data ranges around a central line.

Example

import { CartesianChart, AreaRange, Line } from "victory-native";
import DATA from "./my-data";

export function MyChart() {
  return (
    <CartesianChart data={DATA} xKey="x" yKeys={["y"]}>
      {({ points }) => (
        <>
          {/* Draw shaded area for error bounds */}
          <AreaRange
            points={points.y.map(p => ({
              ...p,
              y: p.y + errorMargin,  // Upper bound
              y0: p.y - errorMargin  // Lower bound
            }))}
            color="rgba(100, 100, 255, 0.2)"
            animate={{ type: "spring" }}
          />
          {/* Draw the main line */}
          <Line
            points={points.y}
            color="blue"
            strokeWidth={2}
            animate={{ type: "spring" }}
          />
        </>
      )}
    </CartesianChart>
  );
}

Props

points

An AreaRangePointsArray array that extends the standard PointsArray type but uses:

• y to represent the upper bound
• y0 to represent the lower bound

animate

The animate prop takes a PathAnimationConfig object and will animate the path when the points change.

curveType

A CurveType value that indicates the type of curve should be drawn (e.g. linear or natural).

connectMissingData

The connectMissingData: boolean value that indicates whether missing data should be interpolated for the resulting Path. If set to true, the output will be a single, connected area (even if there are missing data values). If set to false, if there is missing data values – the path will consist of multiple disconnected "parts".

children

A children pass-thru that will be rendered inside of the Skia Path element, useful if you'd like to make e.g. a gradient path.

Paint properties

The AreaRange component will also pass the following painting props down to the underlying Path component:

• color
• blendMode
• opacity
• antiAlias