Our users collect a lot of data and analyse it in Tulip. When we built our Analytics product in 2016, we chose Plotly for our charting experience. Plotly however does not play well with our current React technology stack, so our team has been working hard to replace Ploty with Recharts. This blog post is the start to a series of posts on how we are using Recharts and extend it in our internal charting library.
Deriving actionable insight from data is a core component of our platform. With Tulip, you can create apps to collect data in your operations from both operators as well as machines. The use cases are vast, as is the structure and type of data we capture.
To enable our customers to explore their data and integrate the insights generated into their daily processes, we have created new powerful insights features and alerts, enabling our customers to generate insight from data is the core of Tulip Analytics.
Our existing charting solution hindered feature development.
When we built our product, we chose to use Plotly. Since then, a lot has changed. We forked Plotly, as we improved the default behaviour on many bugs, but have since missed to update our fork. We not only missed out on a lot of critical updates, but have also coupled data processing with visualisation. This turned out to hinder the addition of new features such as Forecasting.
To enable charting beyond Tulip Analytics, we want to create an internal charting library. As we approached overhauling our analytics product, we decided to start at the core, and extract the charts into an internal charting library that can be reused across the product in the future, not just in our analytics platform.
Decoupling data processing from the visualisation, we are able to add advanced processing capabilities and iterate on the charts independently. Further, as charts might be used across the product, we will be able to provide a consistent user experience.
Recharts is extendable and easy to use.
After initial research we narrowed potential candidates down to two options, Visx and Recharts:
Visx is a collection of expressive, low-level visualisation primitives for React and open-source and has convincing arguments:
Keep bundle sizes down. visx is split into multiple packages. Start small and use only what you need.
Un-opinionated on purpose. Bring your own state management, animation library, or CSS-in-JS solution. Odds are good your React app already has an opinion on how animation, theming, or styling is done. visx is careful not to add another one and integrates with all of them.
Not a charting library. As you start using visualisation primitives, you’ll end up building your own charting library that’s optimised for your use case. You’re in control.
During our research, we were convinced that Visx is powerful, but realised it also is not straightforward to use. First introduced in a blog post, the chart below is a reminder that for now we want an easy library, that is React familiar. This would unblock new feature development and we would still be able to migrate single React component charts with Visx down the road.
Recharts we discovered, is easy to use, fits right into our React codebase. Recharts default behaviour enables a quick migration from Plotly, unblocking us from adding advanced visualisation features.
Most components in Recharts enable passing a React component to override the default rendering behaviour which would unlock us to use our existing component library:
Overriding the Legend
Overriding the Tooltip Cursor
Our internal charting library goes beyond Recharts features and requires extension
Instead of using Recharts directly in our product, we encapsulate the dependency in a charting library, exposing a simple interface targeting our use cases. In following blog posts, we will dive into these use cases and share how we implemented them.
Internationalization
As our product has a language setting and translations, translating labels of categories in charts is a requirement. In the Tooltip, in the Legend and on the Axis ticks, translations and custom formatting needs to be respected.
Time series
The default Recharts ticks for time series does not suffice our requirements. The ticks are not distributed nicely, and we want to further influence their formatting. Further, the interface for selecting the ticks on the axis is not straightforward and some combinations of properties lead to buggy behaviour. Instead, our charting library should automatically detect the right axis type and plot ticks accordingly.
Tooltips
The default Tooltip for line charts does not handle multiple time series well. Instead, the Tooltip grows out of the chart, showing too many data points at once. Instead, we want to only show the data point closest to the cursor, ensuring that the Tooltip does not grow beyond the chart.
Advanced Charts
Recharts is simple as it targets only visualisation. We want to also offer advanced charts that process or aggregate data before plotting it, such as a Histogram, Pareto chart or a Control Chart.
We are actively contributing to the Recharts repository.
As we continue to build a platform for our users, we recognize the importance of community and open-source development. While working to create our new charting library and continue to bring advanced features for visualisation and data processing to Tulip, we have ensured that we are giving back to the Recharts developer community. Members of our team are direct contributors to Recharts, organising work and shaping the direction of the library.
The new charting experience is available to all Tulip customers along with more exciting Analytics and machine learning features. Visit our blog announcement to learn more →