victory-zoom-container

VictoryZoomContainer

victory-zoom-container@^30.0.0 exports VictoryZoomContainer, zoomContainerMixin, ZoomHelpers, and RawZoomHelpers

View these docs at https://formidable.com/open-source/victory/docs/victory-zoom-container to see live examples.

VictoryZoomContainer provides pan and zoom behavior for any Victory component that works with an x, y axis. Zoom events are controlled by scrolling, and panning events are controlled by dragging. See an example of a zoomable chart

VictoryZoomContainer may be used with any Victory component that works with an x-y coordinate system, and should be added as the containerComponent of the top-level component. However, the component that uses it must be standalone (standalone={true}), which is the default for all top-level Victory components.

<VictoryChart domainPadding={{ y: 10 }}
  containerComponent={
    <VictoryZoomContainer/>
  }
>
  <VictoryScatter
    y={(datum) => Math.sin(2 * Math.PI * datum.x)}
  />
</VictoryChart>

Props

VictoryZoomContainer uses a superset of props used by VictoryContainer. All props are optional.

allowPan

type: boolean

The optional allowPan prop accepts a boolean that enables the panning functionality. Zooming will still be enabled when the allowPan prop is set to false.

default: allowPan={true}

allowZoom

type: boolean

The optional allowZoom prop accepts a boolean that enables the zoom functionality. Panning will still be enabled when the allowZoom prop is set to false.

default: allowZoom={true}

clipContainerComponent

type: element

VictoryZoomContainer works by clipping data outside of a given domain. VictoryZoomContainer uses VictoryClipContainer by default. This prop should not be replaced with a custom component, but you may want to set props on VictoryClipContainer, such as clipPadding

example: clipContainerComponent={<VictoryClipContainer clipPadding={{top: 10, right: 10}}}/>}

disable

type: boolean

When the disable prop is set to true, VictoryZoomContainer events will not fire.

downsample

type: number || boolean

The downsample prop limits the number of points that will be displayed. This prop may be given as a boolean or a number corresponding to maximum number of points. When given as a boolean, the maximum number of points that will be plotted is 150.

minimumZoom

type: { x: number, y: number }

The minimumZoom prop sets a minimum domain extent for the zoomed chart. When the difference between the maximum and minimum of a zoomed domain is equal to the minimumZoom in either dimension, the component will stop responding to events that would normally trigger zooming in. Zooming out and panning will still be enabled. When this prop is not specified, the default minimum zoom will cover 1 / 1000th of the original domain. This prop should be given as an object with numeric values for x and y.

example: minimumZoom={{x: 1, y: 0.01}}

onZoomDomainChange

type: function

The optional onZoomDomainChange prop accepts an function to be called on each update to the visible domain. The function accepts the parameters domain (the updated domain) and props (the props used by VictoryZoomContainer).

example: onZoomDomainChange={(domain, props) => handleDomainChange(domain, props)}

zoomDomain

type: { x: [low, high], y: [low, high] }

The zoomDomain prop describes the zoomed state. This prop is an object that specifies separate arrays for x and y. Each array is a tuple that describes the minimum and maximum values to render. If this prop is not provided initially, the chart will render without an initial zoom, displaying the entire dataset. Updates to zoomDomain will trigger a re-render of the chart with the new domain.

example: zoomDomain={{x: [0, 100]}}

zoomDimension

type: "x" || "y"

When the zoomDimension prop is set, panning and zooming will be restricted to the given dimension (either x or y), and the domain of the other dimension will remain static. When this prop is not specified, both x and y dimensions will pan and zoom.

example: zoomDimension="x"

Changelog

32.0.0 (2019-02-27)

Horizontal Chart Improvements!

#1258

The goal of this change is to make it possible to turn any existing chart into a horizontal chart by adding the horizontal prop to the chart without needing to alter any other props.

• supports horizontal versions of all chart types without needing to alter data
• supports all event containers for horizontal charts
• enforces consistency across props that take x and y values so that the x value always refers to the independent dimension, and the y value always refers to the dependent dimension.
• the orientation of VictoryAxis components is no longer tied to whether or not they are the dependentAxis

Breaking Changes

Most Horizontal Charts The change in how props with x and y values are treated (i.e. scale, domain, etc) will be a breaking change for most horizontal charts. In most cases, reversing the x and y values of props you are providing to your horizontal chart will be sufficient to correct the change. For example:

<VictoryChart horizontal scale={{ x: "log" }} domain={{ y: [4, 9] }}>
  <VictoryBar
    data={[
      { x: 5, y: 0.1 },
      { x: 6, y: 1 },
      { x: 7, y: 10 },
      { x: 8, y: 100 }
    ]}
  />
</VictoryChart>

Should be changed to:

<VictoryChart horizontal scale={{ y: "log" }} domain={{ x: [4, 9] }}>
  <VictoryBar
    data={[
      { x: 5, y: 0.1 },
      { x: 6, y: 1 },
      { x: 7, y: 10 },
      { x: 8, y: 100 }
    ]}
  />
</VictoryChart>

Props affected by this change are: scale, domain, maxDomain, minDomain, domainPadding, and categories

Horizontal Charts with Event Containers Dimension props such as brushDimension have changed so that they always refer to the dimension of the target variable (x for the independent variable, and y for the dependent variable). For example, a VictoryBrushContainer component with brushDimension="x" will move and expand only in the independent dimension regardless of whether the chart is horizontal.

Props affected by this change are: brushDimension, cursorDimension, selectionDimension, voronoiDimension, and zoomDimension

Horizontal Charts with Custom dataComponents The position values (i.e. x, y, x0, y0) supplied to custom dataComponents from components like VictoryChart will be scaled for the layout of the horizontal chart. Users who rely on these values may need to flip them or adjust them depending on their use case

Horizontal VictoryBoxPlot Previously VictoryBoxPlot required data to be flipped (x values flipped with y values) in order to plot horizontal charts. This is no longer required, and providing data in this format will no longer work correctly. To correct for this change, it should be sufficient to flip the data used in horizontal charts