Creating Victory Charts React Native

Introduction to Victory Native XL

Data visualization is a cornerstone of modern mobile applications, enabling users to quickly grasp trends, patterns, and insights from raw numbers. When building React Native applications, choosing the right charting library can significantly impact both development velocity and end-user experience.

Victory Native XL stands out as a powerful, high-performance solution that leverages cutting-edge native rendering technologies to deliver silky-smooth charts that animate at over 100 FPS even on lower-end devices. This guide walks you through creating beautiful, customizable charts using Victory Native XL, from initial setup to advanced interactive features.

Why Choose Victory Native for React Native

• Render function-based architecture provides unmatched flexibility
• Hardware-accelerated rendering via React Native Skia
• Smooth animations running on the UI thread through Reanimated
• Touch-friendly interactions designed specifically for mobile devices
• Composable design for building complex, multi-layered visualizations

Installation and Setup

Setting up Victory Native XL requires installing several peer dependencies that form the foundation of its rendering and animation capabilities.

Installing Core Dependencies

# Using yarn
yarn add react-native-reanimated react-native-gesture-handler @shopify/react-native-skia

# Using npm
npm install react-native-reanimated react-native-gesture-handler @shopify/react-native-skia

Configuring Babel for Reanimated

Add the Reanimated plugin to your babel.config.js:

module.exports = {
 presets: ['module:metro-react-native-babel-preset'],
 plugins: [
 'react-native-reanimated/plugin',
 // other plugins must come after
 ],
};

Installing Victory Native XL

yarn add victory-native
# or
npm install victory-native

Troubleshooting Common Installation Issues

Version Compatibility: Ensure all packages are compatible with your React Native version. Victory Native XL requires React Native 0.72 or higher. Check the official documentation for the latest compatibility matrix, as version mismatches are the most common source of setup issues.

iOS Pod Installation: For iOS projects using CocoaPods, navigate to your iOS directory and run pod install after installing npm packages. This step is required because React Native Skia includes native iOS components that need to be linked through CocoaPods.

Babel Plugin Order: The Reanimated Babel plugin must be the last entry in your plugins array. If animations don't work after setup, verify your babel.config.js ordering. Other plugins that transform React Native code must come after Reanimated's plugin.

Metro Bundler Cache: After installing new dependencies, clear your Metro cache by running npx react-native start --reset-cache to ensure the new packages are properly bundled.

Expo Managed Workflow: If you're using Expo, install dependencies with npx expo install to ensure version compatibility. For bare React Native projects within Expo, you may need to prebuild with npx expo prebuild to generate native modules.

Creating Your First Chart

Victory Native XL follows a declarative pattern where you define data, specify which keys map to x and y coordinates, and render child components that define how the data should be visualized.

Preparing Your Data

const temperatureData = [
 { date: '2024-01-01', high: 42, low: 28 },
 { date: '2024-01-02', high: 45, low: 31 },
 { date: '2024-01-03', high: 38, low: 24 },
 { date: '2024-01-04', high: 41, low: 27 },
 { date: '2024-01-05', high: 47, low: 33 },
 { date: '2024-01-06', high: 44, low: 29 },
 { date: '2024-01-07', high: 40, low: 26 },
];

Building a Basic Line Chart

import { CartesianChart, Line, useFont } from 'victory-native';

const TemperatureChart = () => {
 const data = [
 { day: 1, temperature: 42 },
 { day: 2, temperature: 45 },
 { day: 3, temperature: 38 },
 { day: 4, temperature: 41 },
 { day: 5, temperature: 47 },
 { day: 6, temperature: 44 },
 { day: 7, temperature: 40 },
 ];

 return (
 <CartesianChart
 data={data}
 xKey="day"
 yKeys={['temperature']}
 axisOptions={{ font }}>
 {({ points }) => (
 <Line
 points={points.temperature}
 strokeColor="#FF6B6B"
 strokeWidth={3}
 curveType="catmull-rom"
 />
 )}
 </CartesianChart>
 );
};

Understanding the Render Function Pattern

Victory Native XL's render function pattern provides maximum flexibility. The children render function receives calculated point coordinates derived from your data, scaled to fit the chart's dimensions. This approach separates data processing from rendering, allowing each component to focus on its specific responsibility while maintaining excellent performance.

For more on working with React Native components and hooks, see our guide on JavaScript Array Methods for efficient data manipulation techniques that pair well with charting libraries.

Adding Axes and Grid Lines

Victory Native XL provides built-in support for axes and grid lines through the axisOptions prop, making it straightforward to add context to your visualizations.

Configuring Axis Options

<CartesianChart
 data={data}
 xKey="date"
 yKeys={['value']}
 axisOptions={{
 font: customFont,
 tickCount: { x: 7, y: 5 },
 showGridLines: true,
 gridLineColor: '#E0E0E0',
 xAxis: {
 label: 'Date',
 tickFormat: (value) => new Date(value).toLocaleDateString(),
 },
 yAxis: {
 label: 'Revenue ($)',
 tickFormat: (value) => `$${value.toLocaleString()}`,
 },
 }}>
 {/* chart content */}
</CartesianChart>

The tickFormat functions allow you to transform raw values into display strings for dates, currency, percentages, or any other formatted values. This keeps your rendering code clean while centralizing the formatting logic where it can be easily maintained.

Creating Bar Charts

Bar charts excel at comparing discrete categories or showing quantities across different groups. Victory Native XL's Bar component works within the same CartesianChart framework as Line, making it easy to switch between chart types or even combine them in the same visualization.

Basic Bar Chart Implementation

import { CartesianChart, Bar } from 'victory-native';

const SalesByMonth = () => {
 const monthlySales = [
 { month: 'Jan', sales: 45000 },
 { month: 'Feb', sales: 52000 },
 { month: 'Mar', sales: 48000 },
 { month: 'Apr', sales: 61000 },
 { month: 'May', sales: 55000 },
 { month: 'Jun', sales: 67000 },
 ];

 return (
 <CartesianChart
 data={monthlySales}
 xKey="month"
 yKeys={['sales']}
 axisOptions={{ font }}>
 {({ points }) => (
 <Bar
 points={points.sales}
 fillColor="#4CAF50"
 barWidth={24}
 roundedCorners={4}
 />
 )}
 </CartesianChart>
 );
};

Grouped and Stacked Bar Charts

For comparing multiple series across categories, grouped bar charts display multiple bars side by side for each category. This requires rendering multiple Bar components with offset adjustments to position them appropriately. The offset prop shifts each bar group horizontally, allowing them to be positioned side by side for professional-quality comparison charts.

Stacked bar charts, where series are placed on top of each other, are useful for showing how different components contribute to a whole. This approach works well for visualizing budget breakdowns, sales by region, or any scenario where the relationship between parts and the whole matters.

Implementing Interactive Tooltips

Interactive tooltips enhance charts by allowing users to explore specific data points on touch devices through the useChartPressState hook.

Setting Up Chart Press State

import { CartesianChart, Line, useChartPressState } from 'victory-native';

const InteractiveChart = () => {
 const data = Array.from({ length: 30 }, (_, i) => ({
 day: i + 1,
 value: 50 + 30 * Math.random(),
 }));

 const { state, isActive } = useChartPressState({
 x: 0,
 y: { value: 0 },
 });

 return (
 <CartesianChart
 data={data}
 xKey="day"
 yKeys={['value']}
 chartPressState={state}
 axisOptions={{ font }}>
 {({ points }) => (
 <>
 <Line
 points={points.value}
 strokeColor={isActive ? '#FF6B6B' : '#666666'}
 strokeWidth={isActive ? 4 : 2}
 animate={{ type: 'timing', duration: 200 }}
 />
 {isActive && (
 <Tooltip
 x={state.x.position}
 y={state.y.value.position}
 label={data[Math.round(state.x.value)]?.value}
 />
 )}
 </>
 )}
 </CartesianChart>
 );
};

The useChartPressState hook creates a shared state that tracks which data point is currently selected, enabling smooth animated transitions. When a user presses on the chart, the state updates to reflect the nearest data point. The isActive value indicates whether a point is currently selected, allowing you to conditionally render tooltips and apply visual highlighting for an engaging user experience.

Performance Best Practices

Victory Native XL is designed for performance, but achieving optimal results requires understanding key principles. The library's architecture already handles many optimizations automatically, but being mindful of how you structure your components and data can make a significant difference, especially with large datasets or complex animations.

Memoizing Data and Callbacks

const ChartComponent = React.memo(({ data }) => {
 const renderChart = React.useCallback(({ points }) => {
 return <Line points={points.data} strokeColor="blue" strokeWidth={2} />;
 }, []);

 return (
 <CartesianChart data={data} xKey="x" yKeys={['data']}>
 {renderChart}
 </CartesianChart>
 );
}, (prevProps, nextProps) => prevProps.data === nextProps.data);

Managing Large Datasets

• Downsample data for initial display
• Progressively load higher-resolution data on zoom
• Use ring buffer patterns for real-time updates
• Throttle frequent data updates to maintain smooth animations

Optimizing Animations

Animate only critical visual changes and skip animation props for secondary properties to maintain smooth performance. While Victory Native XL's animations run on the UI thread through Reanimated, overly complex animations can still impact performance on lower-end devices.

For real-time data scenarios, consider techniques like data interpolation to smooth transitions between points, preventing jarring visual jumps while maintaining a responsive feel.

Advanced Customization

Victory Native XL's architecture supports sophisticated customizations beyond the built-in chart types. By combining the basic components and accessing the full power of Skia's rendering capabilities, you can create unique visualizations tailored to your application's specific needs.

Creating Area Charts

<CartesianChart data={data} xKey="date" yKeys={['value']}>
 {({ points }) => (
 <Area
 points={points.value}
 fillColor="rgba(33, 150, 243, 0.3)"
 strokeColor="#2196F3"
 strokeWidth={2}
 curveType="catmull-rom"
 />
 )}
</CartesianChart>

Adding Annotations and Markers

• Threshold lines with dashed patterns for target values
• Event markers for significant data points like milestones
• Trend lines and reference values for context
• Custom labels positioned using chart scales

Responsive Chart Containers

import { useWindowDimensions } from 'react-native';

const ResponsiveChart = ({ data }) => {
 const { width: screenWidth, height: screenHeight } = useWindowDimensions();
 const chartWidth = screenWidth - 40;
 const chartHeight = Math.min(screenHeight * 0.4, 300);

 return (
 <View style={{ width: chartWidth, height: chartHeight }}>
 <CartesianChart data={data} xKey="x" yKeys={['y']}>
 {/* chart content */}
 </CartesianChart>
 </View>
 );
};

For more advanced React Native techniques, explore our guide on Signals vs Hooks Reactivity Models to understand different approaches to managing state in data-driven applications.

Summary

Victory Native XL provides a powerful, flexible foundation for creating high-performance data visualizations in React Native applications. Its composable architecture, built on Skia's rendering capabilities, enables charts that run smoothly even on resource-constrained mobile devices.

The library's approach of separating data processing (D3) from rendering (Skia) delivers both flexibility and performance. From simple line charts to complex interactive dashboards, Victory Native XL scales to meet diverse use cases without sacrificing the smooth animations users expect.

Key Takeaways

1. Start with fundamentals: Proper installation, render function pattern, and basic chart types
2. Add interactivity: Implement tooltips and gestures for engaging user experiences
3. Optimize performance: Memoize components and manage large datasets effectively
4. Customize as needed: Use annotations and advanced patterns for unique visualizations

Victory Native XL's thoughtful design ensures that early learnings remain applicable as you build increasingly sophisticated visualizations.

For teams building comprehensive React Native applications, consider pairing Victory Native XL with other modern frontend technologies. Learn how to use Static Site Generation with Modern React Frameworks to create performant web companions for your mobile apps.

Sources

1. Victory Native Documentation - Official documentation for Victory Native XL
2. Victory Native Getting Started Guide - Step-by-step implementation tutorial
3. Getting Started with Victory Native - DEV Community - Community installation guide
4. Top React Native Chart Libraries - LogRocket - Library comparison