Table of Contents
Building Responsive and Performant Graphs in React Native
Author
Date
Book a call
The Challenges We Faced with Graph Implementations:
When working with popular graph libraries in React Native, several practical issues often arise, particularly around responsiveness, alignment, and performance. Here are a few of the most common challenges we encountered:
1. Y-Axis Scrolling Issue
When making the graph horizontally scrollable (for large datasets), the Y-axis scrolled along with the graph content, making it difficult to keep the labels visible while navigating through the data.
2. Axis Alignment Issues
To fix the above issue, we attempted to create two separate graphs - one for the Y-axis and another for the main scrollable X-axis. While this approach initially worked, it introduced alignment inconsistencies between the two graphs, especially when the chart data or layout was updated dynamically.
3. Performance and Crashes on iOS
What We Require from our Charting Solution
After evaluating multiple libraries and approaches, it became clear that our ideal solution had to:
- Handle large datasets gracefully without crashes.
- Support independent Y-axis rendering for better user readability.
- Offer responsiveness across screen sizes.
- Be lightweight and performant, minimizing bundle size and build times.
- Stay easy to integrate.
The Solution:
After exploring several options, we found that combining a lightweight, flexible charting library like react-native-gifted-charts with custom dynamic logic gave us the right balance between performance, maintainability, and control.
Some of the features that stood out about the library were:
- Built-in support for scrollable charts with fixed axes
- Smooth animations and transitions
- Highly customizable props for colors, labels, gradients, and legends
- Optimized rendering that prevents crashes even with large data sets
- Lightweight and efficient, which reduced the app’s bundle size, improved runtime performance, and significantly shortened the time required to create production builds.
1. Installation
To get started, let’s install the necessary dependencies that will enable chart rendering and responsive scaling in our React Native project:
- react-native-gifted-charts (the charting library)
- react-native-svg (for rendering graphics)
- react-native-linear-gradient (or expo-linear-gradient if in an Expo project)
- react-native-responsive-screen for dynamic sizing across devices (recommended).
Using Expo (recommended):
Note: Make sure these dependencies are linked (in non-Expo projects) so the native modules work correctly. (Autolinking should handle it in recent React Native versions.)
2. The final optimized implementation:
Let’s now walk through the final optimized setup step-by-step, starting from the base configuration and moving into the dynamic enhancements we added to make the graphs stable, scalable, and production-ready.
Setting Up the Base Chart
The react-native-gifted-charts library provides a solid and efficient starting point for creating bar graphs. It handles much of the heavy lifting for graph rendering, animations, and performance optimizations internally.
This base setup alone helps resolve two major pain points we previously faced:
- App crashes on iOS for large datasets: We found that react-native-gifted-charts handled large datasets smoothly without triggering the Metal texture allocation errors we previously encountered on iOS. This makes it a reliable choice for rendering dense graph data across platforms.
- Y-axis scrolling along with the chart content: The library keeps the Y-axis fixed while allowing horizontal scrolling of large datasets, which significantly improved the readability and usability of the graphs.
Key Props and Their Purpose
Before diving into custom enhancements, it’s essential to understand a few key props that form the backbone of every chart:
- barWidth
Controls the width of each bar. We used wp("5.5%") to keep it proportional to screen width, ensuring the chart looks balanced on both phones and tablets.
- height and width:
Defines the overall chart dimensions. Using percentage-based values (like height={wp("38%")}) makes the graph scale fluidly across devices.
- Spacing:
so that the chart maintains even spacing on different screen types.
- noOfSections, stepValue, and maxValue
- maxValue: The highest Y-axis value (We multiply the maximum value by 1.2 to add a buffer, ensuring that the tallest bar does not get cropped at the top.)
maxValue = noOfSections * stepValue
- formatYLabel:
- xAxisLabelTextStyle and yAxisTextStyle:
Controls the font size, alignment, and color of the X and Y-axis labels. We adjusted font sizes for tablets and phones for better legibility.
- frontColor, xAxisColor, and yAxisColor:
- xAxisColor & yAxisColor: Defines the axis line colors for a subtle and professional look.
- dashGap:
Defines gaps between dashes in grid lines. We have set it to 0 to show solid lines behind the graphs.
Making the Charts Truly Dynamic
Now that we have the base graph working, let’s move on to the custom enhancements we added to improve accuracy, responsiveness, and flexibility.
Dynamic Y-Axis Width for Large Values
This approach provides the following benefits:
- Prevents label truncation: The Y-axis automatically adjusts to fit larger values.
- Maintains proper alignment: The bars and axes remain visually consistent regardless of dataset size.
- Improves responsiveness: Works seamlessly across devices with different screen sizes.
Properly Calculating Chart Sections and Scaling
maxValue = noOfSections * stepValue
If this relationship is not maintained, for instance, when only one of the three values is adjusted manually, the chart may render incorrectly or not at all.
Note: Additionally, the documentation advises reloading the app whenever these values or related props (height, stepHeight, etc.) are modified, as the new configurations are sometimes applied only after a full reload.
Structuring the Data for Flexibility
Styling the Top Labels:
Property breakdown:
- value: Defines the height of the bar (e.g., 150).
- label: Sets the X-axis label (e.g., "KA-51-AF-4155").
- topLabelComponent – A Custom React component for displaying value labels above each bar.
This approach ensures consistent styling and responsiveness while offering full customization for each data point.
The End Result
By combining the base setup from react-native-gifted-charts with the above enhancements, we achieved:
- Smooth, crash-free performance on both IOS and Android, even with large datasets.
- A fixed, properly aligned Y-axis for improved readability.
- Dynamic scaling and sizing that adapts to any screen size or dataset.
- Clean, customizable visuals ready for production use
Our Graph in Action:
3. Advanced: Creating Grouped Bar Graphs
In many scenarios, we need to display multiple metrics side-by-side for the same category, such as current vs expected values. The react-native-gifted-charts library makes it straightforward to implement grouped bar charts by structuring the data prop appropriately and customizing the top labels.
Data Structure for Grouped Bars:
To implement a grouped bar chart, most of the setup remains the same as a standard bar chart. However, there are a few additional considerations for handling multiple bars per category:
- spacing: Adds space between bars within a group to clearly separate metrics like current vs expected values.
- topLabelComponent: For grouped bars, it’s important to dynamically render the label above the taller bar in each group.
- frontColor: Can be used to differentiate bars within the same group
Dynamic Top Labels
Key Points:
- Dynamic Positioning: The top label is placed above the bar with the larger value in the group, ensuring it doesn’t overlap or look misaligned.
- Dynamic Width Calculation: By calculating the width of the label based on the text length and screen type (tablet vs mobile), we prevent clipping of labels.
- Conditional Styling: Using the isLow flag, we can apply different colors to indicate low vs high values, improving readability and visual cues.
Our Grouped Bar Graph in Action:
Final Thoughts
Building responsive and performant graphs in React Native is about more than just aesthetics; it’s about ensuring usability, speed, and adaptability across devices. The react-native-gifted-charts library offers a strong foundation, and with a few tailored enhancements like adaptive layouts and precise alignment, we can create production-ready graphs that deliver a seamless experience across Android, IOS, and tablets.
Related Articles
Dive deep into our research and insights. In our articles and blogs, we explore topics on design, how it relates to development, and impact of various trends to businesses.
