Frequently Asked Questions (FAQ)

Thanks for trying Victory! The FAQs below are based on issues and questions from our users. You can find more examples in our gallery. Can't find what you're looking for? Help us improve these docs by opening an issue with the "docs" tag, or by making a pull request.

Most components in Victory use a standard style prop with style namespaces for "data" and "labels". Any styles added to the "data" namespace will be applied to all the svg elements rendered for a given dataset.

Individual elements in Victory can be styled by adding style attributes directly to your data object and using functional styles and props as in the example below. Functions are called with all the props that correspond to the element they render.

Note that continuous data types such as VictoryLine and VictoryArea cannot be styled in this way, as they only render a single element for a given dataset.

Create a gradient def as usual and then reference it by id in your style object. Gradients can be used to give continuous charts (i.e. line or area charts) the appearance of discrete data elements and hover states. A more complex example is given here.

Use VictoryLabel as a child of VictoryChart to add arbitrary labels. Labels can be positioned with the x and y props, or with datum when used within VictoryChart or VictoryGroup.

Victory doesn't have specific components for annotations. Instead, use standard components such as VictoryLine and VictoryScatter to add lines and markers to your chart.

VictoryChart uses default axes. If you want to plot data without using any axes, use VictoryGroup instead.

When no axes are supplied to VictoryChart it will render pair of default axes. If any axes are supplied as children to VictoryChart it will render only those axes.

VictoryChart will render any number of axes, but all children rendered by VictoryChart will be forced to use the same domain. To create a single chart with the appearance of several different domains, you can either compose components manually without the aid of VictoryChart, as described in this guide, or normalize all of your data, and re-scale your axis tick labels to give the appearance of separate domains as in this example.

VictoryChart automatically aligns axes so that they cross at their origin. Use the offsetX and offsetY props on VictoryAxis to alter this default behavior. Note: Axes that typically cross at zero will not display ticks or tick labels at zero. To change this behavior, set the crossAxis prop to false. Read more about VictoryAxis.

Axis tick labels are controlled via two props. tickValues controls the positions of ticks along the axis, and tickFormat controls how labels are displayed. Use the tickFormat prop to customize axis labels. This prop can be given as an array of strings, or as a function that returns a string. Functions provided to tickFormat are called with the following arguments: tickValue, index and tickArray. Read more about VictoryAxis.

Long axis labels can be problematic. There are several ways to address the issue. The best solution will depend on the specific requirements of your project. The following examples demonstrate:

• Altering padding
• Splitting labels onto multiple lines
• Allowing labels to overflow the container with VictoryPortal
• Using angled labels

When a dataset only has a single value, or when all values on an axis have the same value, the single-point domain for that axis will be converted to a two-point domain. Victory does this by offsetting the domain value by a very small number. To solve this, you will need to manually set sensible defaults on the domain of your chart.

VictoryLine only renders a single element to represent an entire dataset, so replacing its labelComponent with VictoryTooltip won't work as expected, since there will be only a single event trigger. Voronoi tooltips can be used to add tooltips and other interactions to components without unique event triggers, or with event triggers that are too small, or too close together to be useful. Use VictoryVoronoiContainer to associate mouse position with the nearest data points. Read more about Voronoi Tooltips and VictoryVoronoiContainer.

VictoryTooltip uses defaultEvents which are prepended onto any events array provided in props. When events container onMouseOver and onMouseOut events, they will interfere with the defaultEvents on VictoryTooltip to correct this, your events prop will need to return the same mutations as defaultEvents. Read about tooltip events here.

Bars in VictoryBar are centered around their corresponding value by default. You can move your bars away from your axis by setting a new domain, adding a domainPadding, or changing how bars are aligned relative to their values with the alignment prop on VictoryBar.

By default Victory components are rendered within responsive SVGs that preserve the aspect ratio set by the width and height props. Charts will automatically scale to fit within parent elements while maintaining a set aspect ratio. The size of your chart may be changed by rendering it within a smaller container. The aspect ratio of the chart may be changed by altering the width and height props. The default responsive behavior may also be disabled by setting responsive={false} on any Victory container.

Victory renders charts into top-level container components. The most basic container is VictoryContainer. It is responsible for rendering children into a responsive svg, and providing a portal component for rendering tooltips, or any other elements that should be rendered above everything else. Other Victory container, such as VictoryZoomContainer and VictoryCursorContainer provide an interactive layer for the chart. These containers perform all the same functions as VictoryContainer in addition to their specialized functions.

• VictoryZoomContainer: Adds pan and zoom functionality to a chart
• VictoryVoronoiContainer: Associates mouse position with the nearest data points, and is useful for tooltips and other hover interactions
• VictorySelectionContainer: Adds the ability to select points within a region
• VictoryBrushContainer: Adds a moveable highlighted region to charts
• VictoryCursorContainer: Renders a cursor line and label that follows mouse position.

To use one of these containers, change the containerComponent prop on your top-level Victory component. Note: Containers are not rendered when standalone is set to false.

Victory includes a createContainer helper that is used to create hybrid containers. createContainer can be used to create a new container with behaviors from two existing Victory containers. Read more about createContainer here.

Whilst using victory-native in Expo apps that target iOS & Android is fully supported, we do not support building for the web with victory-native.

However as both victory-native and victory share the same public API, it's possible to configure your Expo project so that it automatically uses victory-native when building your native apps for iOS & Android, and victory when building your web app.

☣️ Please note that while you can follow the instructions below to configure your Expo project to make this work, Formidable still does not officially support Expo Web apps.

yarn add -D @expo/webpack-config

Then, create a webpack.config.js file in the root of your Expo project

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // resolve victory-native as victory for the Web app
  config.resolve.alias['victory-native'] = 'victory';

  return config;
};