Flexible Charting in React with Victory (and Introducing FormidableCharts)

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?

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