victory-zoom-container
Advanced tools
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>
VictoryZoomContainer uses a superset of props used by VictoryContainer. All props are optional.
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}
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}
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}}}/>}
type: boolean
When the disable prop is set to true, VictoryZoomContainer events will not fire.
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.
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}}
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)}
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]}}
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"
30.0.0 (2018-07-17)
Victory is becoming a monorepo!
This will not be a breaking change for the majority of users, especially those importing all components from the main victory npm package
Breaking Changes
Axis / Grid primitive component has been renamed LineSegmentvictory-chart and victory-core packages export different sets of packages than they used to. See the complete list belowNew Package Organization
victory exports everything exported from the packages belowvictory-axis@30.0.0 exports VictoryAxisvictory-area@30.0.0 exports VictoryArea and Areavictory-bar@30.0.0 exports VictoryBar and Barvictory-box-plot@30.0.0 exports VictoryBoxPlotvictory-brush-container@30.0.0 exports VictoryBrushContainer, BrushHelpers and brushContainerMixinvictory-brush-line@30.0.0 exports VictoryBrushLinevictory-candlestick@30.0.0 exports VictoryCandlestick and Candlevictory-chart@30.0.0 exports VictoryChartvictory-core@30.0.0 still exports several packages that are used by several Victory components:
VictoryAnimationVictoryClipContainerVictoryContainerVictoryLabelVictoryPortal and PortalVictoryThemeVictoryTransitionArc, Border / Box, Circle, ClipPath, LineSegment (formerly Axis / Grid), Line, Path, Point, Rect, Text, TSpan, WhiskeraddEvents, Axis, Collection, CommonProps, Data, DefaultTransitions, Domain, Events, Helpers, Immutable, LabelHelpers, Log, PropTypes, Scale, Selection, Style, TextSize, Timer, Transitions, Wrappervictory-create-container@30.0.0 exports createContainer, combineContainerMixins and makeCreateContainerFunctionvictory-cursor-container@30.0.0 exports VictoryCursorContainer, CursorHelpers and cursorContainerMixinvictory-errorbar@30.0.0 exports VictoryErrorBar and ErrorBarvictory-group@30.0.0 exports VictoryGroupvictory-legend@30.0.0 exports VictoryLegendvictory-line@30.0.0 exports VictoryLine and Curvevictory-pie@30.0.0 exports VictoryPie and Slicevictory-scatter@30.0.0 exports VictoryScattervictory-selection-container@30.0.0 exports VictorySelectionContainer, SelectionHelpers and selectionContainerMixinvictory-shared-events@30.0.0 exports VictorySharedEventsvictory-stack@30.0.0 exports VictoryStackvictory-tooltip@30.0.0 exports VictoryTooltip and Flyoutvictory-voronoi@30.0.0 exports VictoryVoronoi and Voronoivictory-voronoi-container@30.0.0 exports VictoryVoronoiContainer, VoronoiHelpers and voronoiContainerMixinvictory-zoom-container@30.0.0 exports VictoryZoomContainer, RawZoomHelpers, ZoomHelpers and zoomContainerMixinFAQs
Interactive Zoom Component for Victory
The npm package victory-zoom-container receives a total of 93,958 weekly downloads. As such, victory-zoom-container popularity was classified as popular.
We found that victory-zoom-container demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.