From Paid to Free: Migrating to an Open-Source Graph Library Without Compromise

Introduction

“In the world of data visualization, delivering intuitive and interactive charts is essential for modern applications. For a long time, our team relied on a subscription-based graph library, which came with powerful features but at a high annual cost. As a single-application license exceeded $332 per year, we started questioning if there was a more cost-effective way to achieve the same results.

This led us to a challenge: Could we migrate to a free, open-source library without compromising on functionality, user experience, or aesthetics? After a thoughtful evaluation and systematic implementation, we successfully transitioned to an open-source library that met all our needs and helped us significantly reduce costs.

Hi everyone, I’m @Alam, a Software Engineer at Money Forward. I work on the Corporate Service Development Group, focusing on the BFM (Business Financial Management) product on the frontend side.

In this post, I’ll share our journey—from evaluating potential libraries to overcoming challenges during implementation—and how we achieved a seamless transition to the open-source Victory library.”

The Motivation for Change

The high cost of our subscription-based graph library—over $332 per year for a single application—pushed us to reconsider our options. While the tool was powerful, we realized it didn’t offer the flexibility we needed for customization.

We started asking ourselves some key questions: Could we achieve the same functionality without paying a premium? Were there open-source alternatives that could provide not only equivalent features but also greater customization? And, most importantly, could we do this without impacting the user experience?

The motivation was clear: we wanted to minimize costs while maintaining, or even enhancing, the quality and usability of our data visualizations. This led us to the idea of migrating to an open-source library, one that could help us achieve our goals of cost savings and flexibility while still delivering the same high-quality charts that our users depended on.

The Research and Decision Process

Once we identified the need for a change, the next step was to explore potential open-source libraries that could meet our requirements. Our goal was clear: find a library that closely matched the features and functionality of our existing paid solution but without the hefty price tag.

To begin, one of my team members, conducted extensive research on various open-source libraries. He focused on key factors like bundle size, frequency of library maintenance, and overall community support. After thoroughly evaluating several options, two libraries emerged as strong contenders: Victory and ObservableHQ.

ObservableHQ was an intriguing option due to its flexibility. However, it quickly became clear that it would require a significant amount of effort to configure, as it’s a low-level library. We would have to write a lot of custom configurations to match our existing charts, which would result in a considerable time investment.

On the other hand, Victory, with its built-in functionality and robust support from the React community, appeared to be the better fit. It offered many of the features we needed right out of the box, which would help us save development time and effort while still providing the flexibility to customize as needed.

After careful consideration, we decided to go with Victory for its ease of integration, popular usage within the React ecosystem, and active community. It seemed to offer the perfect balance between flexibility and built-in functionality.

Implementation Journey

Once we decided on Victory, we embarked on the process of integrating it into our project. The transition from our paid library to an open-source solution was not without its challenges, but step by step, we were able to replicate and improve upon the functionality we needed. Here’s a breakdown of our journey:

Group Bar Chart Implementation: We started with the basics—implementing a grouped bar chart. This was the core visualization that our application depended on. Victory made it straightforward to create this chart with minimal configuration. The API was easy to understand, and we were able to produce a chart that closely matched the look and feel of the original with just a few adjustments.

Group Stacked Bar Chart: The next step was to implement a stacked bar chart. This required a bit more configuration, as we had to adjust the data structure to make it compatible with the stacked format. Thankfully, Victory’s flexibility allowed us to achieve the desired result without much hassle. The stacked chart was soon up and running, displaying our data in the same intuitive way as before.

Line Chart: After the bar charts, we turned our attention to a line chart, which was another key visualization in our application. Victory made this transition relatively easy as well, offering built-in support for lines and customizable properties like color, line style, and stroke width. We were able to add a line chart that matched the look of the previous library almost immediately.
Graph Interaction: Next, we added interactivity to our charts. This involved implementing features like tooltips, hover effects, and clickable elements. Victory provided built-in support for these interactive features, which made the process much easier. Users could now hover over bars or lines to get additional information, enhancing the overall experience.

Rendering Real Data With the basic charts and interactions in place, we moved on to rendering real data. This involved integrating Victory with our backend systems and ensuring that the charts updated dynamically with live data. Victory’s API allowed us to do this efficiently, ensuring that the charts were always up to date with the most current information.
Fine-Tuning At this point, everything was working, but it wasn’t perfect. We spent time on fine-tuning—adjusting the appearance of the charts, ensuring they were responsive across different screen sizes, and optimizing performance for faster rendering. Fine-tuning also involved customizing the chart labels, axes, and tooltips to match our design guidelines.

Testing Finally, we conducted thorough testing. We tested for edge cases, performance issues, and cross-browser compatibility to ensure that the charts were reliable and bug-free. The testing phase was crucial in catching any last-minute issues and ensuring the charts performed well under real-world conditions.

The implementation process was an exciting challenge, and by the end, we had a fully functional, cost-effective solution that met all our needs. The flexibility and ease of use offered by Victory made it the ideal choice for this migration.

Call to Action

If you’re considering migrating to an open-source solution or exploring alternatives to costly libraries, we encourage you to explore the wide range of open-source graph libraries available. By making the switch, you can significantly reduce costs while maintaining, or even improving, the quality and flexibility of your charts. We’ve found Victory to be an excellent choice, but there are many other open-source options worth considering based on your needs. Dive into the open-source community, contribute where you can, and explore the possibilities to build more efficient and cost-effective solutions. If you’d like to see our implementation or have questions about our journey, feel free to check out our project repository on GitHub. Together, we can make the most of the open-source ecosystem!

Conclusion

Migrating from a paid to an open-source graph library was a rewarding journey that not only helped us significantly reduce costs but also allowed us to maintain the high-quality, customizable visualizations our users rely on. By carefully evaluating available libraries, we found that Victory offered the perfect balance of built-in functionality and flexibility, all backed by a strong community. Our transition demonstrated that with thoughtful planning and the right open-source tools, it’s possible to achieve both cost savings and a seamless user experience. We hope our journey inspires others to explore the potential of open-source solutions and contribute to the broader development community.