RangeAreaChart#

The RangeAreaChart component displays a shaded area between a range of values for each data point, typically between a start and end value. It is ideal for visualizing value intervals, such as temperature ranges, confidence intervals, or min/max ranges over time.

Usage Example#

1<RangeAreaChart
2  marks={[
3    { label: "Jan", start: 0, end: 4 },
4    { label: "Feb", start: 2, end: 6 },
5    ...
6  ]}
7/>

Props#

marks: Array<object> (required)#

Each mark defines the area range for one category.

• label: string | Date The X-axis label (e.g., month, category name, time).

• start: number The lower boundary of the range.

• end: number The upper boundary of the range.

• (Optional) properties from ChartMarkProps:

  • foregroundStyle – fill color of the area
  • opacity, interpolationMethod, annotation, etc.

interpolationMethod?: string#

Specifies how the area curve is drawn between points. For example, 'catmullRom' produces a smooth, curved shape between ranges.

Full Example#

1const weatherData = [
2  { month: "Jan", min: 0, max: 4 },
3  { month: "Feb", min: 2, max: 6 },
4  ...
5]
6
7<RangeAreaChart
8  marks={weatherData.map(item => ({
9    label: item.month,
10    start: item.min,
11    end: item.max,
12    interpolationMethod: "catmullRom"
13  }))}
14/>

This example plots monthly temperature ranges using a smooth interpolated area chart.

Use Cases#

RangeAreaChart is well-suited for:

• Temperature ranges over time
• Visualizing confidence intervals in statistics
• Min/max stock prices, performance bands, or uncertainty areas