AreaStackChart#

The AreaStackChart component displays a series of values as stacked areas over a shared axis, allowing for a clear comparison of data parts and totals across categories or time.

Usage#

1<Chart frame={{ height: 300 }}>
2  <AreaStackChart
3    marks={[
4      {
5        category: "Cheese",
6        label: "2020",
7        value: 0.26,
8        stacking: "standard"
9      },
10      ...
11    ]}
12  />
13</Chart>

Props#

marks: Array<object> (required)#

An array of data points to render on the chart.

Each mark supports the following properties:

• category: string A category label for the mark, typically used to group data in the stacked chart.

• label: string | Date The x-axis label for this mark. Can be a year, date, or other descriptor.

• value: number The numeric value to be represented by the mark.

• unit?: CalendarComponent Specifies the calendar component for time-based values (e.g., "year", "month", "day"). Useful when rendering time series.

• stacking?: ChartMarkStackingMethod Controls how marks are stacked:

  • "standard": Stack values from a common baseline (default).
  • "normalized": Normalize all values to represent a percentage of the total.
  • "center": Stack around a central axis for symmetrical data.
  • "unstacked": Render without stacking.

• Other optional ChartMarkProps: Includes extensive styling and behavior options such as:

  • foregroundStyle
  • opacity
  • cornerRadius
  • interpolationMethod
  • symbol, symbolSize, annotation, clipShape, shadow, blur, zIndex, offset, etc.

Refer to ChartMarkProps for detailed mark customization.

labelOnYAxis?: boolean#

Whether to display the label values on the Y-axis instead of the default X-axis. Defaults to false.

Example#

1<AreaStackChart
2  labelOnYAxis={false}
3  marks={[
4    {
5      category: "Burger",
6      label: 2020,
7      value: 0.6,
8      stacking: "standard"
9    },
10    {
11      category: "Cheese",
12      label: 2020,
13      value: 0.26,
14      stacking: "standard"
15    },
16    {
17      category: "Bun",
18      label: 2020,
19      value: 0.24,
20      stacking: "standard"
21    }
22  ]}
23/>