diff --git a/docs/src/content/docs/victory-animation.md b/docs/src/content/docs/victory-animation.md index d2818e8ec..db5afc10e 100644 --- a/docs/src/content/docs/victory-animation.md +++ b/docs/src/content/docs/victory-animation.md @@ -8,6 +8,8 @@ type: docs # VictoryAnimation +> [See this guide to animations with Victory Charts](/guides/animations). The `VictoryAnimation` component is used for animating arbitrary React components and is not commonly used. + `VictoryAnimation` animates prop changes for any React component. To animate prop changes, define a child function that accepts an object of tweened values and other animation information and returns a component to render. ```jsx diff --git a/docs/src/content/docs/victory-clip-container.md b/docs/src/content/docs/victory-clip-container.md index 136629fc8..bc97c5961 100644 --- a/docs/src/content/docs/victory-clip-container.md +++ b/docs/src/content/docs/victory-clip-container.md @@ -1,7 +1,7 @@ --- id: 10 title: VictoryClipContainer -category: more +category: containers type: docs scope: null --- @@ -10,6 +10,16 @@ scope: null `VictoryClipContainer` is a specialized group container that enables curtain-style transitions for continuous data types like `VictoryLine` and `VictoryArea`. `VictoryClipContainer` will render its children either in a regular `` element, or in a `` element clipped by a rectangular clip path when a `clipWidth` is supplied. +```playground + + + } + /> + +``` + ## children `type: element || array[element]` diff --git a/docs/src/content/docs/victory-tooltip.md b/docs/src/content/docs/victory-tooltip.md index 7660a23f6..55b925f17 100644 --- a/docs/src/content/docs/victory-tooltip.md +++ b/docs/src/content/docs/victory-tooltip.md @@ -13,6 +13,26 @@ scope: *note:* When providing tooltips for `VictoryLine` or `VictoryArea`, it is necessary to use [`VictoryVoronoiContainer`](/docs/victory-voronoi-container), as these components only render a single element for the entire dataset. +See the [tooltips guide](/guides/tooltips) for more expanded examples of usage. + +```playground + + } + data={[ + {x: 2, y: 5, label: "right-side-up"}, + {x: 4, y: -6, label: "upside-down"}, + {x: 6, y: 4, label: "tiny"}, + {x: 8, y: -5, label: "or a little \n BIGGER"}, + {x: 10, y: 7, label: "automatically"} + ]} + style={{ + data: {fill: "tomato", width: 20} + }} + /> + +``` + ## active `type: boolean` diff --git a/docs/src/content/guides/animations.md b/docs/src/content/guides/animations.md index ae799a9c0..82603acbe 100644 --- a/docs/src/content/guides/animations.md +++ b/docs/src/content/guides/animations.md @@ -8,7 +8,7 @@ scope: --- # Animations -VictoryAnimation is able to animate changes in props using [d3-interpolate][]. Victory components define their animations via the `animate` prop. `duration`, `delay`, `easing` and `onEnd` functions may all be specified via the `animate` prop. +Victory is able to animate changes in props using [d3-interpolate][]. Victory components define their animations via the `animate` prop. `duration`, `delay`, `easing` and `onEnd` functions may all be specified via the `animate` prop. ```playground_norender function App() {