Flexible Charting in React with Victory (and Introducing FormidableCharts)

November 9, 2016

Victory: React charts tailored to your data

Charting directly with d3 can be difficult, but other libraries are often too simplistic. Enter Victory: React charting that is easier than direct use of d3.js but with as much flexibility as possible. Victory allows fully customized charts ranging from basic to highly complex. To learn more about the complete Victory API, check out the documentation.

Flexibility and Customizability

Modular Chart Components

Victory is built around a set of modular chart components that can be combined to create custom charts. Victory favors composition over configuration, allowing users to build up complicated visualizations from smaller components.

<VictoryChart> <VictoryGroup data={myData}> <VictoryLine/> <VictoryScatter/> <VictoryErrorBar/> </VictoryGroup> </VictoryChart>

Functional Styles

Functional styles and props are supported whenever possible. Want to make data points below a certain threshold a different color than the rest of the data? It’s easy in Victory.

style={{data: {fill: (datum) => datum > 0 ? "red" : "blue"}}}

Custom Components

Victory components render default primitive components (like Area, Line, Bar, VictoryLabel etc.). These simple, stateless components are defined in defaultProps, and my be easily altered or replaced with completely custom components. Modify the primitives or write components that you need from scratch without having to abandon the rest of the Victory library.

<VictoryChart> <VictoryScatter data={myData} dataComponent={<CustomPoint/>} labelComponent={<VictoryLabel angle={45}/>} /> </VictoryChart>

React Native Compatible

To use the full (identical!) Victory API on iOS or Android, simply add Victory Native to your React Native project with npm install --save victory-native. Victory Native uses react-native-svg to build the same Victory charts that you love from the browser on mobile operating systems.

Flexible Event System

Victory has a flexible event system with no hard coded events. This allows users to attach event handlers to any specific rendered element or elements, and modify any other specific element or elements. Event handlers are called with the event and all of the props that define the specific element that the event handler was attached to, and modification functions are called with all of the props that define each targeted element.

Some components, like VictoryTooltip, also have defaultEvents. Default events on components supplied via dataComponent, labelComponent, or similar, are picked up. This means that labelComponent={<VictoryTooltip/>} will automatically attach events to show or hide tooltips to the rendered data of whichever component is using it, making it one less thing that you have to worry about.

Custom Animations

Victory animations and transitions are also flexible and customizable. Users can add animations for onLoad, onEnter, and onExit, plus use before and after callbacks and set the duration of the transitions. Animation duration, delay, and easing are also easily customizable. Animations can be applied to a single child component within a chart, or applied to a VictoryChart wrapper to sync animations and transitions across all child components.

And Now, Move Quickly with FormidableCharts

While we value the flexibility provided by Victory, we also know it has its tradeoffs, especially when it comes to putting something together quickly while keeping it polished and clean. That’s why we’re excited to introduce FormidableCharts, a set of pre-composed, pre-styled Victory components that can be used to display rich, interactive charts. Our theming system not only supports style-based theming, but behavioral and compositional theming as well. Install in your React project with npm install --save formidable-charts.

When should I use FormidableCharts versus Victory?

Web and Native ChartsWeb and Native Charts
Emphasizes Ease of UseEmphasizes Flexibility
Prebuilt ChartsModular Chart Components
Automatic AnimationsConfigurable Animations
Automatic EventsFlexible Event System
Readymade ThemesCustom Themes and Styles
Custom Feature Support

Victory and FormidableCharts are free for use under the MIT license and we welcome contributions. If you’re planning on submitting a PR, please review our Contributing Guide before doing so. If you have an issue you’d like fixed or a feature request, please submit an issue on Github.

Read Documentation for Victory.
View the Victory Source Code on Github.
Read Documentation for FormidableCharts.
View the FormidableCharts Source Code on Github.

Star the Victory repo on Github

Star the FormidableCharts repo on Github

Related Posts

Digital Transformation - What Does the Research Tell Us?

July 7, 2022
Today, no business can afford to ignore the productivity efficiencies, conveniences, and improved user experience modern digital systems can deliver.

Building Teams and Profiling Third Parties

April 21, 2022
Welcome to Part 2 of our series where we deep dive into the findings from our recently published report, ‘The State of Digital Transformation'.

New Research: The State of Digital Transformation

January 25, 2022
We're excited to introduce our inaugural custom research report, The State of Digital Transformation.