VictoryArea

info

For examples of VictoryArea in action, visit the Area Chart examples.

Inherited Props

VictoryDatableProps

• categories
• data
• dataComponentoverridden
• domain
• domainPadding
• samples
• sortKey
• sortOrder
• x
• y
• y0

VictoryMultiLabelableProps

• labelComponentoverridden
• labels

VictoryCommonProps

• animate
• colorScale
• containerComponent
• disableInlineStyles
• domainPadding
• externalEventMutations
• groupComponentoverridden
• height
• horizontal
• maxDomain
• minDomain
• name
• origin
• padding
• polar
• range
• scale
• sharedEvents
• singleQuadrantDomainPadding
• standalone
• theme
• width

VictoryEventProps

• eventKeyoverridden
• eventsoverridden

Component Props

---

dataComponent

type: ReactElementdefault: <Area>

VictoryArea overrides the standard dataComponent prop and supplies the following props to its dataComponent:

• data
• events
• groupComponent
• interpolation
• origin (for polar charts)
• polar
• scale
• style

note

Because VictoryArea renders a single element to represent the entire dataset, the dataComponent it renders will not have access to datum like the dataComponent elements rendered by other Victory components such as VictoryScatter.

---

eventKey

type: string | number | string[] | number[] | (args: CallbackArgs) => string | number

VictoryArea uses the standard eventKey prop. Read about the eventKey prop in more detail here

note

VictoryArea only renders one element per dataset, so only one event key will be generated.

---

events

type: array[object]

VictoryArea uses the standard events prop. Read about it in detail

See the Events Guide for more information on defining events.

note

VictoryArea uses the special eventKey "all" rather than referring to data by index, as it renders only one element for an entire dataset

Live View

Loading...

Live Editor

<div style={{ margin: 50 }}>
  <h3>Click the area chart element</h3>
  <VictoryArea
    events={[
      {
        target: "data",
        eventHandlers: {
          onClick: () => {
            return [
              {
                eventKey: "all",
                mutation: (props) => {
                  const fill =
                    props.style &&
                    props.style.fill;
                  return fill ===
                    "black"
                    ? null
                    : {
                        style: {
                          fill: "black",
                        },
                      };
                },
              },
            ];
          },
        },
      },
    ]}
    data={sampleData}
    theme={VictoryTheme.clean}
  />
</div>

---

groupComponent

type: ReactElementdefault: <VictoryClipContainer>

VictoryArea uses the standard groupComponent prop. Read about it in detail

note

VictoryArea uses VictoryClipContainer as its default groupComponent VictoryClipContainer renders a <g> tag with a clipPath def. This allows continuous data components to transition smoothly when new data points enter and exit.

warning

Using a custom groupComponent with VictoryArea may result in broken animations.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
>
  <VictoryArea
    groupComponent={
      <VictoryClipContainer
        clipPadding={{
          top: 5,
          right: 10,
        }}
      />
    }
    style={{
      data: {
        stroke: "#c43a31",
        strokeWidth: 5,
        strokeLinecap: "round",
      },
    }}
    data={sampleData}
  />
</VictoryChart>

---

interpolation

type: InterpolationPropType | Functiondefault: "linear"

The interpolation prop determines how data points should be connected when creating a path. Victory uses d3-shape for interpolating curves.

Interpolation Options

Both cartesian and polar charts may use the following interpolation options:

• "basis"
• "cardinal"
• "catmullRom"
• "linear"

Cartesian charts may also use the following interpolation options:

• "monotoneX"
• "monotoneY"
• "natural"
• "step"
• "stepAfter"
• "stepBefore"

You can also provide a custom curve function.

Live View

Loading...

Live Editor

<VictoryArea
  interpolation="natural"
  data={sampleData}
  theme={VictoryTheme.clean}
/>

---

labelComponent

type: ReactElementdefault: <VictoryLabel renderInPortal />

VictoryArea uses the standard labelComponent prop. Read about it in detail

note

To enable tooltips on VictoryArea, it is necessary to use VictoryVoronoiContainer

Live View

Loading...

Live Editor

<VictoryArea
  data={sampleData}
  labels={({ datum }) => datum.y}
  labelComponent={
    <VictoryLabel
      renderInPortal
      dy={-20}
    />
  }
  theme={VictoryTheme.clean}
/>

---

style

type: VictoryStyleInterfacedefault: (provided by theme)

Defines the style of the component using VictoryStyleInterface.

note

Since VictoryArea renders a single element to represent an entire dataset, it is not possible to use functional styles to change the style of the line as a function of an individual datum. Instead, try using gradient fills for styling continuous data.

Live View

Loading...

Live Editor

<VictoryArea
  style={{
    data: {
      fill: "#c43a31",
      fillOpacity: 0.7,
      stroke: "#c43a31",
      strokeWidth: 3,
    },
    labels: {
      fontSize: 15,
      fill: ({ datum }) =>
        datum.x === 3
          ? "#000000"
          : "#c43a31",
    },
  }}
  data={sampleData}
  labels={({ datum }) => datum.x}
  theme={VictoryTheme.clean}
/>