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?
FormidableCharts | Victory |
---|---|
Web and Native Charts | Web and Native Charts |
Emphasizes Ease of Use | Emphasizes Flexibility |
Prebuilt Charts | Modular Chart Components |
Automatic Animations | Configurable Animations |
Automatic Events | Flexible Event System |
Readymade Themes | Custom 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