New Features

Victory is actively developed. You can read about some of our newest features here. For more information on improvements and bug fixes, check out our changelog.

With improved chart and chart component accessibility in mind, we've added a VictoryAccessibleGroup for use with the groupComponent prop. This component will wrap its children in a g tag with a user provided aria-label and optional description via the desc prop. Other available props can be found in the docs.

We've also added ariaLabel and tabIndex props to all our primitives. Documentation on these can be found in under VictoryPrimitives.

We've also added automatic onFocus and onBlur events for VictoryTooltip so that charts with tabIndex defined can easily show tooltips to users navigating with a keyboard.

VictoryLabel now supports backgrounds! The backgroundStyle prop lets you render and style a rect element behind your label. The size of the rect is determined for you based on the size and style of the label. The backgroundPadding prop may be used to adjust the size of the background rect.

Label backgrounds also work with multi-line and inline labels:

Label backgrounds are also compatible with tooltips!

We added a labelPlacement prop to VictoryPie that makes it easier to match label angles to the angles of their corresponding slices. Placement options are "vertical", "parallel", and "perpendicular". This prop may also be given as a function. It works with tooltips, too!

We've added a new charting component to allow you to easily create histogram charts. With VictoryHistogram you can create beautiful and interactive histograms.

Using the bins prop, you have flexibility in how your data is binned, allowing you to specify specific bin ranges, or an approximate count of how many bins you want.

You can stack VictoryHistogram too, just wrap it in VictoryStack!

We wanted to make it easier to style the chart backgrounds, so we added a backgroundComponent for VictoryChart. Now, when you include background styles, VictoryChart will render Background, a styled element that fills the area between your axes.

Try it out!

Polar charts are also supported, with Background rendering a circle instead of a rect element`:

As with other components Victory renders, you can add props directly to Background, or create your own custom backgroundComponent.