Let’s face it – numbers are ugly. But their visualization can be beautiful and (more importantly) insightful to users. Most React apps include some kind of data visualization feature. In fact, this is true not only for React. Charts, graphs and other types of visual representations of data are some of the most common components of mobile and web applications today.
One of the advantages of JavaScript frameworks like React is that they are scalable and versatile. With an ocean of libraries and components that extend the functionality available out of the box? The majority of developers (logically) opt for 3rd party libraries or services.
Sure, you can homebrew your charts in React without relying on library components designed, written, maintained and used by others. However, considering the time you will need to spend developing and maintaining the code you will create? It’s clear why a popular and well-maintained chart library for React is the way to go.
Which brings us to the question: which React charting library should you choose? As with any library or component you introduce into your React project, you should consider a few things. In addition to the features a chart library provides, you should take into account the quality of documentation, the impact on performance, library dependencies and the costs of licensing and support.
To help you compare the available options, we’ve listed the top 11 React chart and data visualization libraries available.
The world of software development is rapidly evolving, with the integration of AI being one of the biggest driving forces. To remain competitive and relevant in this constantly changing landscape, it’s essential to stay up-to-date with the latest advancements and trends. By harnessing the power of AI, software engineers can streamline development processes, reduce errors, and improve software quality. Learn more about how to utilize AI and optimize software engineering practices.
One of the oldest and most reliable chart libraries available for React is recharts. This library features native SVG support, with only light dependency on some D3 submodules. It uses declarative components, with the components of charts purely presentational.
With an active developer community and 15.1K stars on GitHub at the time of writing, recharts is usually the first library to consider when looking for a data visualization library for React applications. It also boasts 481K weekly npm downloads.
This library is not so much a React chart library as it is a React wrapper for a popular JavaScript charting library – chartjs. Charts.js is a lightweight chart library that lets you build responsive chart components by using HTML5 Canvas elements. It offers six different chart styles out of the box and is known to be beginner-friendly.
Chart.js is broadly used in both React and Vue.js with each having its own wrapper library. This library is the wrapper for React, but note that the majority of documentation you will be referencing is that of Chart.js itself. Thankfully, it’s very thorough and community support is also worth noting.
The wrapper library, react-chartjs-2, has 3.4K stars on GitHub and 298K weekly npm downloads.
Victory is a set of modular charting components for React and React Native. It uses the same API for web and React Native applications for easy cross-platform charting. While quite simple to learn and use, Victory is quite flexible allowing for quick integration of line, bar, pie, and candlestick charts in your apps.
One of the reasons for the popularity of this library is the fact that it was developed by Formidable, a well-known company employing highly-skilled developers and designers all over the world. Victory has 8.4K stars of GitHub and a weekly npm download rate of 141K.
Visx is a React chart component library by Airbnb with 11.3K stars and a very active repository on GitHub. Visx combines D3.js with the advantages of React DOM.
The developers behind this open source tool insist it is not a chart library but rather an un-opinionated collection of reusable low-level visualization components.
Another collection of React components on top of D3.js is nivo. What makes nivo unique compared to other chart libraries for React is its ability to render on the server side. The extensive nivo component library offers templates for a variety of useful data visualization charts and graphs.
Nivo also excels in flexibility, offering SVG, HTML and Canvas charts in a single library. It also offers motion/transitions powered by react-motion and though it has only 7.7K stars on GitHub, nivo is a powerful solution for versatile responsive visualization needs.
If you’re looking for ease-of-use and a library you can learn faster than you can order than Uber, then Uber has one for you.
React-vis is a collection of React components to render common data visualization charts. These include line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.
With just 7.5K stars on GitHub and no major releases in over 5 months (at the time of writing), react-vis may not be your first choice. That said, users have been praising the documentation.
Another familiar brand name with its own React chart library on GitHub is AliBaba. Their library, BizCharts, offers just that – charting for business applications based on G2 and React.
BizCharts supports ES6 React syntax and boasts an impressive template library. That said, the documentation and gallery itself are in Chinese. This React chart library has a small, mostly Asian, following that has earned it a total of 5.4K stars on GitHub and a weekly volume of 27K npm downloads.
Rumble-charts is a modest and fairly anonymous charting and visualization library for React. The developers of this library describe it simply as React components for building composable and flexible charts to visualize your data.
It’s based on D3.js under the hood and sadly isn’t very well-maintained or frequently updated with new features.
As the name suggests, this library offers extensive and versatile templates for stock charts in your React app. It packs over 60 technical indicators and overlays and is ready to serve your financial data visualization needs.
It’s worth noting that this library has only 2.9K stars on GitHub and is not frequently maintained or updated.
With react-stockcharts unmaintained, a fork of the project emerged with typescript syntax and bug fixes – react-financial-charts. Though still unknown to most (with only 116 stars on GitHub!), it is becoming a fair alternative to the defunct react-stockcharts.
If you’re looking for a React library that focuses on time series components – you’ve found it. This library contains a set of modular charting components created specifically to visualize time series data and network traffic data in particular on React. Low level elements are constructed using d3, while higher level composability is provided by React.
This library is not actively maintained but almost makes up for it with extensive documentation and examples.
Did we forget one? Did a new one come around that didn’t make it onto out list in time? Let us know in the comments!
[cta_btn url=”https://www.tabnine.com/pricing/landing” label=”Start a free trial”]
In this post, I’m going to explore the array includes(..) idiom in JS, an emerging popular pattern to test if a variable’s value is included in a set of values.
A programming idiom is a patterned way of using one or more language features together in a particular, recognizable way. The result is a familiar approach for solving typical programming tasks, which generally helps the code be more readable and more maintainable. The more common an idiom becomes, the more it receives “best practice” status; but this is purely by accepted convention, not by formal specification.
Let’s consider a variable called department that can hold one of five values: "sales", "marketing", "support", "tech", or "admin". And let’s say there’s an important task to perform only for the sales, marketing, and admin departments.
The most fundamental way of implementing such a check is an if statement with ||-combined conditions:
if (
department == "sales" ||
department == "marketing" ||
department == "admin"
) {
performImportantTask(department);
}
I’d wager most readers are quite familiar with this approach. And familiarity is the strongest component of readability, so we’re likely to accept this style of code readily.
Note: I used the == operator on purpose because in this example, I know/stipulate tha department only ever holds one of 5 non-empty string values, and I know the values I’m comparing against are also non-empty strings. As such, == is perfectly safe because == and === will do exactly the same thing, but I save one character.
So is this an idiom for solving our task? Yes, of sorts.
Of course, this approach does require repeating the department variable (not to mention the || operator in between) for each part of the test condition. If the overall condition includes more than one variable, the names can be quite helpful. But if we’re mostly/only repeating because the syntax of our language doesn’t allow us not to repeat, it might be time to look for another idiom.
ES2016 added a method to arrays called includes(..), which returns a boolean true or false if the value being searched for is included in the array.
So we could do this:
if (
[ "sales", "marketing", "admin" ]
.includes(department)
) {
performImportantTask(department);
}
This is an emergent idiom (meaning it’s starting to catch on more widely) for avoiding the repetition of checking a variable (like department) against a set of values.
I’ll say that it’s become my favorite idiom for this task, and so I use it quite often now.
Since we’re already identifying the possible values as a “set”, you might wonder why wouldn’t just use a Set data structure instead of a generic array:
if (
(new Set([ "sales", "marketing", "admin" ]))
.has(department)
) {
performImportantTask(department);
}
has(..) is a little more nicely named than includes(..). And because it’s a Set, the operation might be implemented in the JS engine slightly more efficiently than the includes(..) method on an array. I say “might” because performance assertions based on assumed/intuited implementation details are a favorite pastime of JS developers, but they’re rarely as clear cut and reliable as the claims.
Consider that even if has(..) is slightly more performant than includes(..), the constructor of the new Set(..) call itself takes in an array, so it’s pretty reasonable to assume that creation of the Set instance that way must strictly be a little slower than just defining a plain array.
Moreover, the new Set(..) expression is a bit awkward inlined in the if statement. We might instead pull it out as a separate variable:
var departments = new Set([ "sales", "marketing", "admin" ]);
if (departments.has(department)) {
performImportantTask(department);
}
The departments variable here is too generic, and makes the code sound unnecessarily redundant. We’d probably want to instead use a name like relevantDepartments or something like that.
Of course, that means we’re going to have to figure out a good name for the separate (and temporary!) variable every single time we use this idiom; since it’s an idiom, we’re expecting to do it a lot in our code. That’s going to get pretty tiresome, I think. For this reason, I prefer not to pull out the inline set/list literal into its own variable, except on limited occassions.
But whether we’re using an array or a Set, there is an unfortunate downside: the semantic order is sorta reversed from how we would normally describe the task in English. Translating this code to english text implies a description like, “Does a set of values have/include this specific value?” But I think most people would describe the task itself as, “Is this specific value included in a set of values?”
There’s lots of cases where programmers have to encode their English pseudo-code in a different order because of the design of the language. My favorite (irksome) example is negation of boolean operators like in, instanceof, etc:
if (!("path" in settings)) {
settings.path = "/tmp";
}
We translate this back to English: “If it’s not the case that the string ‘path’ is in the settings object”, which just feels awkward. Wouldn’t this be nicer?
if ("path" !in settings) {
settings.path = "/tmp";
}
I could only dream.
But just because we do this kind of reversal of logic translation a lot doesn’t mean we should propagate it if we have any other options; those other options are at least worth considering.
So we could imagine a hypothetical feature designed to look like this instead:
if (
department.isIn("sales","marketing","admin")
) {
performImportantTask(department);
}
Or we could get really clever:
if (
department.is("sales").or("marketing").or("admin")
) {
performImportantTask(department);
}
Of course, defining methods (with very generic names like is(..) or or(..)) on the prototypes of all values could be a bit problematic for backwards-compatibility; there’s a decent chance existing code has done this out in the wild somewhere, so the JS feature would collide and potentially break that code.
What if we dreamed it up as syntax instead?
if (
department |==| ["sales","marketing","admin"]
) {
performImportantTask(department);
}
I’ve conjured up an imaginary |==| operator here, which we could call the “set comparison” or “is in” operator. This operator could, under the covers, invoke the includes(..) method on the array, passing in the left-hand operand (department).
That would be cool, but the chances of my blog post idea becoming a reality in JS are pretty low. The best you might be able to do is define your own custom Babel transform so that you could use an operator like I’m suggesting and have it rewrite that code to the array includes form.
As we mentioned earlier, we already have an in operator in JS. So what if it could work like this:
if (
department in ["sales","marketing","admin"]
) {
performImportantTask(department);
}
That would be nice, but unfortunately the in operator already looks for keys (or rather, properties) in an object/array. In the above array, the strings are values, not keys/properties.
You could do this:
if (
department in { sales:1, marketing:1, admin:1 }
) {
performImportantTask(department);
}
Here we’ve converted our array of strings into an object whose properties are the “values” we want to check against. This works, but it’s certainly a bit more confusing and slightly tricky/verbose in needing the :1 value assignments to each property to be a valid object literal.
Of course, if we’re really being clever, we could generate that object from an array, like this:
Object.fromEntries(
[ "sales", "marketing", "admin" ].map(v => [v,1])
);
// { sales:1, marketing:1, admin:1 }
Now, you almost certainly don’t want to put that expression inline in your if. But then we’re back to pulling it out into another temporary variable, which forces us down the path of coming up with a good name for that temporary variable with every usage of the idiom:
// instead of:
// var relevantDepartments = { sales:1, marketing:1, admin:1 };
// we could do this:
var relevantDepartments = Object.fromEntries(
[ "sales", "marketing", "admin" ].map(v => [v,1])
);
if (
department in relevantDepartments
) {
performImportantTask(department);
}
That’s a little better, but it still is quite heavy compared to the all-inline [ .. ].includes(department) expression idiom we presented earlier. Is it worth all this effort just to flip the semantic around from “set includes value” to “value in set”?
There are probably a dozen other ways you might encode this simple task in code. My goal wasn’t to cover every single possible variation. And I’m sure there’s nuances that might cause you to lean one way or another depending on the context.
The thing is: picking a general purpose “idiom” creates a consistency, that leads to familiarity, which ultimately leads to readability.
Idioms are “standards” we define, and by “we” I mean all of us, the greater developer ecosystem. We take the stuff language designers give us, and figure out how we’re going to arrange that in code so our solutions to tasks are understandable and maintainable.
You may have an approach you really like, and you may even have some fellow team members who agree.
But does that make it an “idiom”? In a sense, yes. But in another, arguably greater sense, not yet. The question of idiom’ness is one that can only be answered over time, and by a large body of developers and lots of code they’ve written.
One developer’s clever re-arrangement of syntax/APIs does not make something an idiom. Idioms are not invented, they emerge, they spread, they grow.
So what this whole post comes down to is, despite some of the downsides of array includes(..) as an idiom for “is this variable one of these values”, I think it’s starting to prove itself as an emerging and growing idiom.
I think the array includes(..) idiom in JS is the best option given the various tradeoffs, the one which has the best shot (short of TC39 reading this post and giving us dedicated syntax!) of being generally applicable in our code bases.
As this post is hosted by Tabnine, you might wonder if there’s any relevant connection to semantic autocomplete suggestions. It turns out there definitely is!
The way Tabnine comes up with its suggestions in your code editor is by comparing your code against what it has seen before (not only in your code base but broadly across all permissively licensed open source code they’ve discovered).
In other words, if you use idioms that are generic and common across a broader ecosystem of developers, there’s a much better chance that a tool like Tabnine will recognize it and be able to suggest a close or exact match, saving you time and making you more productive.
Idioms FTW!
There’s no shortage of IDE solutions for PHP developers out there. Beginners can usually get by with basic code editors, but the best practice is to pick an IDE to serve your developing needs over time.
It also helps if said IDE has extensive plugin support and a lively user community, along with a positive track record with community mavens and experts.
One of the most popular PHP-centric IDEs to live up to these demands is PhpStorm by JetBrains. Though if you ask JetBrains themselves, they will tell you it’s the most popular IDE for PHP developers in 2020, with 59% of all PHP developers choosing PhpStorm for their PHP development projects.
PhpStorm includes all you need to develop in PHP right out of the box. However, much like most other IDEs and code editors, PhpStorm can be customized and its functionality can be extended through the use of downloadable community plugins.
Since PhpStorm is a flavor of Intellij IDEA, many of our recommended plugins are compatible with other flavors of the IDE as well. That said, our chart of top plugins and extensions for PhpStorm includes the plugins essential to effective and productive use of PhpStorm specifically.
The PHP Annotations plugin analyses the classes that can be used as annotations, and provides code-completing when writing annotations.
We can’t help the shameless plug. But only because we, and a few hundred thousand other developers, really love Tabnine and are still amazed by what it can it.
Tabnine provides superior code completions. Some say it knows what they’re thinking before they do. We say just give it a shot and install it on PhPStorm, or any other IDE for that matter.
Tabnine for Enterprise provides a secure coding environment that allows teams and organizations to host and train their own AI models. This feature facilitates collaborative autocompletion across IDEs and enhances code security by keeping the codebase and AI model on secure corporate servers. With Tabnine for Enterprise, your development team can enjoy the benefits of powerful AI code assistance, which promotes more productive and error-free coding, all while ensuring the confidentiality and protection of your company’s data.
This essential plugin provides “Method References” and “Type Provider” extracted from the Symfony Plugin (see below). PHP Toolbox also improves some PhpStorm Core functionality and provides better auto-completion for several libraries like PHPUnit, Behat, Doctrine and Twig.
One of the most popular PHP development frameworks is Symfony. When combined with the abovementioned plugins (PHP Toolbox and PHP Annotations), it enables advanced auto-complete capabilities for Symfony components.
PHPUnit Enhancement plugin provides smart autocomplete, code navigation and refactoring features for mock creation. Refactoring is handled in such a way that when you rename a method which is mocked, it is correctly renamed in the string in tests.
This plugin is an open-source Static Code Analyzer for PHP. Among inspections run, it can uncover architecture related issues, weak types control and possible code construct simplifications, performance issues, PHPUnit API usage and security issues.
Note that there is also a commercial version of this tool, called Php Inspections (EA Ultimate).
.ignore provides syntax highlighting and path auto-completion for .gitignore (and other ignore files). It also automatically grays out ignored files in the Project File Tree.
The IntelliJ IDEA .env files support plugin, compatible with PhpStorm, will provide syntax highlighting for the .env file in your PHP project.
As the name suggests, this plugin adds support for editing Apache config (.htaccess) files to your PhpStorm.
CSV Plugin is a lightweight plugin for editing CSV/TSV/PSV files with a flexible Table Editor, syntax validation, structure highlighting, customizable coloring, new intentions and helpful inspections. It’s compatible with all Intellij IDEs, including PhpStorm.
If you work with files of comma separated values, this plugin is a must-have.
Markdown language support for IntelliJ IDEs that offers all the features you need to write in markdown along your PHP code. This includes powerful pasting capabilities, drag and drop of images, refactoring and some autocompletion capabilities.
If you’re a fan of the Vim editor using PhpStorm, worry not! Vim emulation plug-in for Intellij IDEs is the plugin you need. IdeaVim supports many Vim features including normal / insert / visual modes, motion keys, deletion / changing, marks, registers, some Ex commands, Vim regexps, configuration via ~/.ideavimrc, macros, window commands, and more.
One of the plugins you will probably see in any list of Intellij plugins ever – Rainbow Brackets – is as essential as it seems. Which is also why we at Tabnine sponsor its development.
As the name suggests, this handy plugin will add Rainbow Brackets / Rainbow Parentheses for IntelliJ based IDEs including PhpStorm.
Dockerized development is pretty standard nowadays, and it helps to have Docker integration right there in the IDE. For Intellij IDEs, including PhpStorm, there’s a dedicated plugin that provides integration with Docker.
It lets you download and build Docker images, create and run Docker containers from pulled images or directly from a Dockerfile, and more.
Working with databases can get pretty tasking in CLI. So it helps to have a handy tool like the Database Navigator plugin to enable all the development and functionality features for a range of database types right in your PhpStorm IDE.
Another plugin you are likely to see recommended quite often is the String Manipulation plugin. Among others, it features case switching, sorting, filtering, incrementing, aligning to columns, grepping, escaping, encoding and more.
Especially useful if you work with large and complex Git repositories with multiple contributors is the GitToolBox plugin. It extends Git integration in Intellij IDEs (including PhpStorm) with additional features like status display, auto fetch, inline blame annotation, commit dialog completion, behind notifications and more.
It’s worth noting that new plugins are added all the time and old ones are retired as features are integrated into PhpStorm itself. So it’s not unlikely that we missed one (or more), leaving you plenty of room to add insights. Did we miss one? Maybe more? Let us know in the comments!