Great job, developer. You’ve nearly finished your first major React-based project for that new customer. 

But now you’re asked to add a dashboard to show sales revenues or user retention percentage. You know it will take you weeks with traditional methods—computing the data to share, building an endpoint to expose the right data, handling it on the front-end side, presenting it correctly, tweaking the metrics. Isn’t there a more straightforward way? 

Yes, there is.

This tutorial will show you how to build a dashboard using [Recharts](https://recharts.org/), a React library that offers you a set of chart components to speed up the creation of a dashboard, and [Cube](https://cube.dev/), a Headless BI tool that allows you to expose your application database via a set of APIs. The combination will allow you to play with your data and simply copy/paste the generated dashboard code content to your React application. 

Here is the expected result of this tutorial:

![Recharts Dashboard built with Cube](https://i.imgur.com/s7cGBsH.png)

## Introducing Cube

[Cube](https://cube.dev/) positions itself as “Headless BI for building
data applications.” The tool acts as a bridge between the data that is stored, generally in a database (PostgreSQL, MySQL, etc.), and your front-end application that is consuming an API.

![Cube architecture](https://imgur.com/FluGFqo.png)

Cube is available in two flavors: an open-source product, generally named Cube.js, which you must [host yourself](https://cube.dev/docs/getting-started/docker); and Cube Cloud, an enterprise-ready service with [high availability and scalability](https://cube.dev/docs/product/getting-started/cloud). Both options provide the same features.

## Introducing Recharts

[Recharts](https://recharts.org/) is a React library designed to help you create nice charts. By providing an expanded set of [pre-existing charts](https://recharts.org/en-US/api/AreaChart), it allows you to present data in the way you need. 

Let’s take the following piece of code, where `data` is a simple JavaScript array containing the data:

```
<BarChart width={730} height={250} data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
  <Legend />
  <Bar dataKey="pv" fill="#8884d8" />
  <Bar dataKey="uv" fill="#82ca9d" />
</BarChart>
```

It will be shown like this:

![Recharts example](https://i.imgur.com/gw8mMKX.png)

Recharts is a very common solution since it integrates easily in your React environment via the multiple components available. It’s also very customizable to match your requirements: color, style, chart type, etc. You can also specify how to label content, define axis organization, choose the correct shape, and so forth

But because it’s just a front-end library, it needs a `{data}` object with all the content shown on the chart. It’s obvious, but it can be complex to produce this information, for example, if the application is relying on a traditional back end with a classic database system like PostgreSQL or MySQL.

There are also other options for rendering charts on a web application:

* [Charts.js](https://www.chartjs.org/) is a popular solution, but it’s not a React library so you may need to rely on third-party integrations like [this one](https://github.com/reactchartjs/react-chartjs-2). 
* [D3](https://d3js.org/) is also a classic option, but it’s generally much more complex to integrate D3 into a React application, because both libraries will try to access the document object model (DOM).

In this tutorial, you’ll combine [Cube](https://cube.dev/) and Recharts. The good news is that [Cube](https://cube.dev/) supports out-of-the-box Recharts as a charting engine, saving you a lot of time when it’s time to write code.

## Build a Recharts Dashboard with React and Cube

Let’s build the dashboard!

To reproduce the results here, use a sample database available online. You’ll use the MySQL [Employee Sample Database](https://dev.mysql.com/doc/employee/en/). Based on this data, you will build charts to highlight useful metrics:

- Number of employees per department, gender, birth date, etc.
- Average salary per department, gender, hire date, etc.

### Prerequisites

You need to have `docker` and `docker-compose` to use the open-source version of Cube. Since you will spin-up a local MySQL database containing the sample data, you will use Docker to start both a MySQL container and a Cube container. You also need to have `node` and `npm` installed to create the React application for the dashboard. 

With that in place, we can begin.

### Start Cube

To start, you’ll follow the [docker-compose](https://cube.dev/docs/product/getting-started/core/create-a-project) steps.

In an empty new folder named `cube`, create a `docker-compose.yml` file:

```
version: '2.2'

services:
  cube:
    image: cubejs/cube:latest
    ports:
      - 4000:4000
    environment:
      - CUBEJS_DEV_MODE=true
    volumes:
      - .:/cube/conf
  database:
    image: genschsa/mysql-employees
    environment:
      - MYSQL_ROOT_PASSWORD=pass
```

It will allow you to define the two containers needed:
- `cubejs/cube` is obviously the Cube image (started in development mode `CUBEJS_DEV_MODE=true` to use the playground, which you’ll see later)
- `genschsa/mysql-employees` is a MySQL server image with the employee sample database already loaded

Then, run the following to start Cube with the database:

```
docker-compose up
```

Both containers will start up and will be able to communicate with each other.

### Start Cube via Cube Cloud

If you want to use Cube Cloud instead, the process is easier than using Docker. The free-tier is [ generous](https://cube.dev/pricing/) for testing the SaaS solution. 

From [Cube Cloud](https://cubecloud.dev/), log in, for example by using your GitHub account. 

![Starting Cube Cloud](https://i.imgur.com/yuffhcP.png)

Then create a deployment: 

![Create a Deployment](https://i.imgur.com/2HVUXav.png)

You can either import an existing project from GitHub, or create a new project from scratch: 

![Create a project](https://i.imgur.com/uKL7fWl.png)

### Connect to the Database

Let’s roll back to the local deployment. Once the containers are up and running, you’ll be able to connect to `http://localhost:4000` via any browser.

![Cube.js playground](https://i.imgur.com/iK1NPGd.png)

The first task is to connect to the database where your data is located. In your case, you need to connect to the employee sample data. So first select MySQL, then configure the connection:

![Configuration of your MySQL database in Cube](https://imgur.com/z7bVhrv.png)

* Hostname: `database`
* Port: `3306`
* Database: `employees`
* Username: `root`
* Password: `pass` 

(Side note: the `root` password is set in the `docker-compose.yml` file as `pass`. Yes, it’s a local deployment. It should not be shipped to your production environment.)

 An `.env` file is generated after this step to store the database credential information.

### Generate a Schema

The important next step is to generate a schema of your database. It will define the API for later interaction. 

Select the tables as shown in the screenshot below and click on **Generate Schema**.

![Cube Schema Generation](https://i.imgur.com/pcq421H.png)

It will create a set of JavaScript files located in the `schema/` folder, next to your `docker-compose.yml` file. Each file describes how to use each table of your database, that is, which fields can be used as a metric (number of employees), a dimension (department name), or what links can be done between tables. The [dedicated section](https://cube.dev/docs/schema/getting-started) of the documentation is a good starting point to get a good foundation of schema in Cube.

Make sure to replace the generated files with the one you can find in [the GitHub repository for this tutorial](https://github.com/julbrs/cube-recharts-tutorial/tree/main/cube/schema). The files here have been carefully designed to let Cube work well with this particular database.

### Start Playing With Your Data

Once your schema is available, you can start experimenting and build your app. 

For example, go to the **Build** section of the app. Select `Employee Count` as the measure, and `Departments Name` as the dimensions, and keep the **Segment**, **Time** and **Filters** empty. Use a **Bar** chart instead of **Line** and click on **Run** in the middle of the screen. You will see this kind of chart:

![First Chart generated via Cube](https://i.imgur.com/rOK1YmL.png)

Take some time to play with this interface. It’s called the playground, after all, so experiment with your data. You can explore measures and dimensions as well as chart styles. 

You can also define the chart engine for your output. In our case, we want to select first **React** then **Recharts**.

![Switch Chart Engine](https://i.imgur.com/nFvYclM.png)

You can also switch between the following:
* **Chart** renders a test chart.
* **JSON Query** shows the JSON data sent to the Cube API.
* **GraphiQL** shows the equivalent information if you want to use the GraphiQL Cube API.
* **Code** generates the code for the current selected engine. (We will use it shortly.)
* **SQL** shows the exact SQL query sent to the database engine.

The screenshot below is of the code screen: 

![Recharts Code](https://i.imgur.com/SvlINg5.png)

This code can be copy-pasted to any React stack app to include the current element of the playground (in our case, a Recharts chart that is built based on the Cube API). If you scroll down, you’ll see the Cube API information:

```
const cubejsApi = cubejs(
  'APIKEY',
  { apiUrl: 'http://localhost:4000/cubejs-api/v1' }
);
```

Here is the query that is sent to the Cube engine:

```
      query={{
  "measures": [
    "Employees.count"
  ],
  "timeDimensions": [],
  "order": {
    "Employees.count": "desc"
  },
  "filters": [],
  "dimensions": [
    "Departments.Name"
  ]
}}
```

And also the graph component from Recharts:

```
  return (
  <CartesianChart resultSet={resultSet} ChartComponent={BarChart}>
    {resultSet.seriesNames().map((series, i) => (
      <Bar
        key={series.key}
        stackId="a"
        dataKey={series.key}
        name={series.title}
        fill={colors[i]}
      />
    ))}
  </CartesianChart>
```

This code saves you hours during dashboard coding. You simply have to organize the elements on the page correctly and define a set of environment variables (Cube API URL, Cube API Token) to have a production-ready dashboard.

### Build Your Recharts Dashboard

The goal of this section is to integrate the various elements generated from the Cube playground into a React application.

Create a new React application using the [Create React App](https://create-react-app.dev/docs/getting-started/) starter:

```
npx create-react-app react-app
```

Add some needed libraries (_Recharts_ for charting, _CubeJs_ for connecting to Cube API, _AntD_ for styling, _Use Deep Compare_ for a React Hook used by the code produced by Cube):

```
cd react-app
npm add @cubejs-client/core @cubejs-client/react antd use-deep-compare recharts
```

Start your development server:

```
npm start
```

Copy-paste the content of the code screen of your first query in a new file in `src/charts/EmployeesPerDept.js`

Remove the last two lines at the end of the file:

```
const rootElement = document.getElementById('root');
ReactDOM.render(<ChartRenderer />, rootElement);
```

Replace the removed code with a classic component export to declare the chart as a React functional component that can be used in the main `src/App.js` file: 

```
export default ChartRenderer;
```

Now, modify the `src/App.js`:

```
import EmployeesPerDept from "./charts/EmployeesPerDept";

function App() {
  return (
    <div className="App">
      <EmployeesPerDept />
    </div>
  );
}

export default App;
```

If you followed all the steps, you should have the chart below on your development server:

![Recharts chart shown on React application](https://i.imgur.com/vkY3Vfz.png)

You’re welcome to explore [this tutorial’s GitHub repository](https://github.com/julbrs/cube-recharts-tutorial/) containing the schema for the Cube application (under `cube/`) and the final React application (under `react-app/`). It contains the Recharts dashboard with the multiple charts you saw at the start of this tutorial.

## Learn More

If you want to learn more about Cube and Recharts, start by working on [query acceleration](https://cube.dev/docs/caching/pre-aggregations/getting-started/). It allows you to speed up the execution of the query by adding pre-aggregation.

There is also a prebuilt Dashboard App that allows you to build your React app directly based on popular templates:

![Cube Dashboard App](https://i.imgur.com/53JOyrZ.png)

You can use the **Add to Dashboard** button to add any query built via the playground directly. It’s even quicker than the process described in this tutorial.

## What Have You Learned Today?

At first, building a custom dashboard integrated into a React application seems like a complex task. But with the right tools, it can be as simple as deciding what to show as a metric and how to present it. The Cube playground handles all the complexity without limiting you to its default values. You can explore the [Cube API documentation](https://cube.dev/docs/) and the [Recharts API documentation](https://recharts.org/en-US/api) to understand how to customize the generated code.

If your project is dealing with analytics, it’s worth trying Cube. Don’t hesitate to ping the team on their [Slack channel](https://slack.cube.dev/). They’re very responsive and helpful, especially if you’re a new player.

Julien Bras

Recharts

Building a Recharts Dashboard with Cube

Data is the new oil, and it's still true in 2021. However, to turn data into insights, we need to analyze and visualize. **So, here's the question: how to pick the right tool? 🛠**

In this post we're going to go through JavaScript frameworks and libraries that you can use to visualize your data. And I'd like to do a bit more than just list a few frameworks — I'm going to divide the list by the type of data or data visualization because "one size" doesn't fit all. There are different kinds of data, and each needs a specific visualization strategy.

We'll go through...
1. 📈 general-purpose charting libraries
2. 📉 low-level and complex charting libraries
3. 🏁 tables and data grids
4. ⏰ timeline charts & time-based tools
5. 🗺 geospatial and mapping tools
6. ⛅️ word clouds
7. 🌎 3D visualization tools

Also, to help you choose the right tool for your project, I'm going to include a brief summary of each framework, i.e.

- 💵 whether it's paid or open-source
- ⭐️ number of stargazers on GitHub, if it's open source
- 📅 when it was last released (as of today)
- 🧱 the size of the bundle (unpacked size on npm), and
- 🔌 whether it's specific for a particular framework (e.g., React) or it can be used in any JavaScript-based project.

I decided to sort the frameworks and libraries by the number of stargazers because it roughly approximates their popularity and community size (but that's debatable).

Also note that you won't find here an extensive list of every data visualization library which can be found on the internet. However, I hope that this post will help you build your own understanding of the ecosystem.

*📊 And the icing on the cake: I'll provide links to guides and tutorials on data visualization tools built by the Cube.js team. [Cube.js](https://cube.dev) helps to create an API over any database with ease, and it's often used as a very performant backend for analytical data visualizations.*

## 1. General-purpose charting libraries

The first category is probably the most popular. Most data can be visualized with charts: either temporal (when you include time values to the plot, e.g., on the X axis), or non-temporal (when you have only numeric values or labels). Those include bar chart, pie chart, line graph, and similar. And because it's the most used type of charts, there are numerous options to choose from.

### [Chart.js](https://www.chartjs.org)

💵 OSS / ⭐️ 51.8K / 📅 19 Oct 2020 / 🧱 1.44 MB / 🔌 universal

*Simple yet flexible JavaScript charting for designers & developers*

The most popular open-source library for building responsive bar, pie, and line charts. I'd say this is the go-to library for most of the projects, as it fits most of the use cases.

*📊 See [Chart.js Example with Dynamic Dataset](https://cube.dev/blog/chart-js-example-with-dynamic-dataset/) to learn how to modify the data being displayed with Chart.js on-the-fly.*

### [Highcharts](https://www.highcharts.com/blog/products/highcharts/)

💵 Paid & non-commercial licenses / ⭐️ 9.8K / 📅 22 Oct 2020 / 🧱 43.2 MB / 🔌 universal

*Highcharts is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.*

Highcharts is good for large companies whose products rely heavily on data visualization. You can see the code on GitHub, try and use it for non-commercial purposes. And then you can purchase Highcharts license just for Hightcharts or Highcharts plugin for Stocks, Maps, or Gantt if you'd like to use it for commercial purposes. We'll cover those later in this post as well.

*📊 See [React Highcharts Example with Cube.js](https://cube.dev/blog/react-highcharts-example/) for a practical tutorial on creating a dashboard with numerous Highcharts components.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pwp27nnp2x11ku5e0a90.png)

### [Chartist.js](http://gionkunz.github.io/chartist-js/)

💵 OSS / ⭐️ 12.4K / 📅 11 Sep 2019 / 🧱 535 KB / 🔌 universal

*Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries.*

This library is not as actively maintained as others, however, it still worths a mention because of its size with no dependencies. Less than a megabyte, wow!

Just like others, it uses SVGs, it's flexible and it has clear separation of concerns, i. e., CSS is in CSS and JS is in JS, which may not fit all projects, considering that a lot of projects are using CSS-in-JS approach, yet it still deserves our attention.

### [Victory](https://formidable.com/open-source/victory/)

💵 OSS / ⭐️ 8.6K / 📅 1 Sep 2020 / 🧱 2.81 MB / 🔌 React

*An ecosystem of composable React components for building interactive data visualizations.*

Built by [Formidable Labs](https://formidable.com), a company behind such tools as [urqls](https://formidable.com/open-source/urql/) and [Spectacle](https://formidable.com/open-source/spectacle/). Provides an opinionated, but fully overridable React components to use both in web and mobile ([victory-native](https://github.com/FormidableLabs/victory-native)).

### [React-vis](https://uber.github.io/react-vis/)

💵 OSS / ⭐️ 7.6K / 📅 19 Apr 2019 / 🧱 1.81 MB / 🔌 React

*A collection of React components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.*

This library is React-friendly, high-level and customisable, expressive and industry-strong, because it is backed by Uber, so chances are you'll get your answers in case you bump into an issue.

### [amCharts](https://www.amcharts.com/javascript-charts/)

💵 OSS / ⭐️ 864 / 📅 18 Dec 2020 / 🧱 22.6 MB / 🔌 universal

*A go-to library for data visualization. When you don't have time to learn new technologies.*

This is not as popular as the rest, however, it's actively maintained and claims to be easy to use. It could be a good choice if you'd like to combine it with other data viz library for geo and timeline data. I'll cover those in Geo and Timeline sections.

### [AnyCharts](https://www.anychart.com)

💵 Paid & non-commercial licenses / ⭐️ 284 / 📅 29 Sep 2020 / 🧱 11.9 MB / 🔌 universal

*Interactive JavaScript charts designed to be embedded and integrated into web, desktop, and mobile apps.*

This is a paid library with non-commercial license, which could work well for a company who wants to save time and money on charts development, because a lot of charts pre-configured for you, just insert your data. Even such rear charts as Jump Line Chart, Sunburst Chart, or Circular Gauge.

## 2. Low-level and complex dataviz tools

Here go tools for a more complicated and more advanced way to visualize your data. The main reason to go with this approach is either because none of the simple charts can be used to visualize your data, or you need to have more advanced interactivity on your elements.

This approach requires a more advanced and specific knowledge in the area, e.g., SVG drawing or WebGL. Not everyone has access to such resource, so that's why there are libraries that expose a much simpler API for simple cases.

### [D3.js](https://d3js.org)

💵 OSS / ⭐️ 95.4K / 📅 22 Jan 2021 / 🧱 1 MB / 🔌 universal

*D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas, and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.*

This is probably the most popular low-level data visualization library on the internet. There's a few keys to its popularity: first, its flexibility (many other data visualization tools are based on D3.js, we'll discuss them below); second, it's massive [examples gallery](https://observablehq.com/@d3/gallery) which contains literally every visual you can imagine.

*📊 See [D3 Dashboard Tutorial](https://d3-dashboard.cube.dev) for a good jump-starting point to learn how to use D3.js with a backend.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/07cqexvjwztiegaj3jik.png)

`<d3-based-tools>`

And here are a few D3-based libraries: 

### [Plotly.js](https://plotly.com/javascript/)

💵 OSS / ⭐️ 12.7K / 📅 21 Dec 2020 / 🧱 60.4 MB / 🔌 universal

*Built on top of D3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.*

Plotly allows you to combine the best of two words: simple api and power of a D3.js. It's good for quick prototyping as well as complex projects that require complicated graphs and need to be done in a timely manner.

Plotly also has commercial offerings, but that's more in regard to its end-to-end development & deployment platform, Dash Enterprise.

### [C3.js](https://c3js.org)

💵 OSS / ⭐️ 9K / 📅 8 Aug 2020 / 🧱 1.46 MB / 🔌 universal

*D3-based reusable chart library.*

### [Semiotic](https://semiotic.nteract.io)

💵 OSS / ⭐️ 2.1K / 📅 21 Jan 2021 / 🧱 2.77 MB / 🔌 React

*Semiotic is a data visualization framework combining React & D3*

### [Taucharts](https://taucharts.com)

💵 OSS / ⭐️ 1.9K / 📅 26 Feb 2020 / 🧱 1.54 MB / 🔌 universal

*Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion.*

`</d3-based-tools>`

### [Apache ECharts](https://echarts.apache.org/en/index.html)

💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal

*A Declarative Framework for Rapid Construction of Web-based Visualizations*

Another open source charting library that has enormous pre-defined charts ready to be used. The reason I put it in this category, is because not only it has simple charts, like line and bar graphs, but also more complicated ones, like 3D globe, 3D lines, Scatter GL and others. Checkout their [example page](https://echarts.apache.org/examples/en/index.html) and prepare to be amazed.

### [Raphaël](https://dmitrybaranovskiy.github.io/raphael/)

💵 OSS / ⭐️ 10.8K / 📅 14 Aug 2019 / 🧱 1.11 MB / 🔌 universal

*Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web*

Raphael is similar in D3.js in a way that it also allows you to draw your own svg graphics in html. E.g.

```js
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
```

It hasn't been actively maintained and now most of the preference goes to D3.js. Yet it's still relevant and last release wasn't that long ago, so it does deserve a mention in the list.

## 3. Tables and data grids

Some data is tabular and thus belongs to a table. But tables are more framework-specific, so it's hard to collect data tables for every framework in one post. However, here are a few options.

### [ag-Grid](https://www.ag-grid.com)

💵 OSS & paid / ⭐️ 6.9K / 📅 15 Jan 2021 / 🧱 n/a / 🔌 universal

*Advanced Data Grid / Data Table supporting JavaScript / React / AngularJS / Web Components*

Or, as it claims on its website, "The Best JavaScript Grid in the World." It's packed with features and has both OSS and Enterprise versions with bindings for vanilla JS, React, Angular, Vue, and even Polymer.

### [Material UI Data Grid](https://material-ui.com/components/data-grid/)

💵 OSS & paid / ⭐️ 272 / 📅 26 Jan 2021 / 🧱 n/a / 🔌 React

*A fast and extendable data table and data grid for React.*

It's a feature-rich component which is complementary to the whole [Material UI](https://material-ui.com) set of React components. It's available in MIT and commercial versions, too.

There's also some competition here. For the sake of comparison, I should mention the [data table](https://ant.design/components/table/) component of Ant Design library, which is great to use if you need a complete set of UI components.

## 4. Timeline charts & time-based tools

Not all charting libraries include timelines and Gantt charts, they're quite unique in that sense. So if you have some time-based data to plot, then you may be interested in these libraries or plugins.

### [Highcharts Gantt](https://www.highcharts.com/blog/products/gantt/)

Similar to word clouds, you can have Highcharts Gantt plugin provided by the company. Check out out their page to learn more about it.

### [amCharts timeline](https://www.amcharts.com/timeline-chart/)

Similar approach: get the main amCharts library and use additional timeline plugin.

### [vis-timeline](https://github.com/visjs/vis-timeline)

💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal

*Create a fully customisable, interactive timelines and 2d-graphs with items and ranges.*

This is an open-source alternative to the above two libs. It's quite flexible, well-designed, although its last release was about 3 years ago.

## 5. Geospatial and mapping tools

Now we've arrived to geo data, the type of data that has a geographic component to it and should have map-based data visualizations.

### [Leaflet](https://leafletjs.com)

💵 OSS / ⭐️ 30K / 📅 4 Sep 2020 / 🧱 5.96 MB / 🔌 universal

*Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JavaScript plus 4 KB of gzipped CSS code, it has all the mapping features most developers ever need.*

Leaflet is lightweight, simple, and flexible, and is probably the most popular open-source mapping library at the moment. Leaflet was developed by Vladimir Agafonkin, who is currently in Mapbox (see below), and OSS community.

There are numerous tutorials and guides on how to work with leaflet. So it's very cost and time efficient to start and keep working with Leaflet.

### [Mapbox](https://www.mapbox.com)

💵 Free-ish & paid / ⭐️ 7.2K / 📅 28 Jan 2021 / 🧱 34 MB / 🔌 universal

*Mapbox is a mapping and location cloud platform for developers.*

These guys provide SDKs and APIs to companies like Foursquare, Lonely Planet, and Facebook. You can do a lot with Mapbox, and their APIs are a pleasure to work with, well-documented, and well-supported. Check out [their examples page](https://docs.mapbox.com/mapbox-gl-js/example/).

Mapbox isn't completely free. It has a free tier for low volume apps. So it's free for up to 25,000 mobile users and 50,000 web loads. Beyond that you'd need to pay per additional requests.

*📊 See [JavaScript Map Data Visualization with Mapbox](https://mapbox-guide.cube.dev) for a complete guide on Mapbox and different kinds of maps, from heatmaps to choropleths.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/btrt0mfvmctmm0cdjgh7.png)

### [Google Maps](https://developers.google.com/maps/documentation/javascript/visualization)

Google Maps can do a lot more than just show places on a map. You can map data across the world, create heatmaps, and even size circles.

Google has a CDN URL you'd need to include in your project or use a framework-specific wrapper, like [`@react-google-maps/api`](https://www.npmjs.com/package/@react-google-maps/api).

### [amCharts maps](https://www.amcharts.com/javascript-maps/)

If your project is already using amCharts, then you might be interested in using amCharts maps. There is no need to install anything extra, the main amCharts package already includes everything needed for creating a map visualization.

## 6. Word clouds

Not all data is quantifiable. Some data can only be illustrated with words. This is a perfect use case scenario for word clouds. A few libraries allow you to do those.

### [d3-cloud](https://www.jasondavies.com/wordcloud/)

💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal

Great library to use if you already have D3.js as a part of your code ecosystem.

### [amCharts word clouds](https://www.amcharts.com/demos/word-cloud/)

This is a plugin for amCharts. See more details about amCharts earlier in this post. To create word cloud you'd need the main library + the `wordCloud` plugin.

### [Highcharts word clouds](https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series)

Similar to amCharts word clouds, if you want to make word clouds with Highcharts, you'd need `modules/wordcloud.js` module.

## 7. 3D visualization tools

While every tool we've observed above was focused on planar, two-dimensional data visualizations, there's one more dimension to it 😀 The following tools help create 3D visuals.

### [Three.js](https://threejs.org)

💵 OSS / ⭐️ 66.6K / 📅 24 Dec 2020 / 🧱 24.4 MB / 🔌 universal

*The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.*

Three.js is a different take on visualizing data. It's used to create and display animated 3D computer graphics in a web browser using WebGL. Three.js can be used not only visualize data, but also create such pieces of art as [Littlest Tokyo](https://threejs.org/examples/#webgl_animation_keyframes). The data can take ANY form your like. Literary. It's only limited by your creativity.

### [vis-graph3d](https://github.com/visjs/vis-graph3d)

💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal

*Graph3d is an interactive visualization chart to draw data in a three dimensional graph. You can freely move and zoom in the graph by dragging and scrolling in the window.*

This is a very interesting lightweight alternative to D3.js and Three.js.

## Final remarks

Honestly, it's impossible to include everything in one list. But I hope this post helped you get a better idea about the "big players" and types of data visualizations.

It's worth mentioning that to communicate your data better to your user, it's always a good idea to mix and match different types of data visualizations. Moreover, you can also have a date formatting library (such as [Moment.js](https://momentjs.com)) or number formatting library (such as [numeral.js](http://numeraljs.com)) that could accompany your graphs and highlight any special or outstanding number in your dataset. 

Also, if you need an API to serve data to your charts or data visualization components, please consider to use [Cube.js](https://cube.dev).

If you have any particular recommendation or personal experience with any of the listed libraries to share, please feel free to reach out to me and leave a comment on [Cube.js Slack](https://slack.cube.dev)! 🙌

Nikita Kakuev

Data Visualization

Understanding front-end data visualization tools ecosystem in 2021

Artyom Keydunov

Amazon Athena

Building an Open Source Web Analytics Platform

While working on [Cube.js](https://github.com/cube-js/cube.js), we’re seeing a lot of different visualization libraries. Given that Cube.js provides an API layer for analytics on top of an SQL database and doesn’t play on the visualization field, any charting library can be used to build dashboards with it. That’s why we’re always on a search for a nice and developer-friendly visualization library.

The list below is for React-specific libraries. I’ll try to build almost the same stacked bar chart with axes formatting, legend and tooltip using every one of it. For the data backend, we’ll use Cube.js hosted on Heroku. I’ll also use [Cube.js React binding](https://cube.dev/docs/reference/frontend/cubejs-client-react), which uses the [render props](https://reactjs.org/docs/render-props.html) technique and doesn’t render anything itself, letting us build whatever we want with any charting library.

Along the way, I’ll also use two very handy libraries—`moment.js` and `numeral.js` for dates and numbers formatting, respectively.

As a data input, we are going to use the [resultSet.chartPivot()](https://cube.dev/docs/reference/frontend/cubejs-client-core) method from the Cube.js Javascript client. It returns an array of data, and in our case, it looks like this:

```javascript
[
  {
    "x": "2017-01-01T00:00:00.000",
    "completed, Orders.count": 208,
    "processing, Orders.count": 252,
    "shipped, Orders.count": 233
  },
  {
    "x": "2017-02-01T00:00:00.000",
    "completed, Orders.count": 188,
    "processing, Orders.count": 209,
    "shipped, Orders.count": 222
  },
  …
]
```

Now, let’s jump to the list.

_If you don’t see your favorite library or just want me to add one more—just ping me in [this Public Slack Community](https://cubejs-community.herokuapp.com/). I’m happy to add as many libraries as I can to the list._

## Recharts

[Recharts](http://recharts.org) provides a set of modular charting components and does a great job by letting you mix those components together to easily build things like a [composed line and bar chart](https://recharts.org/en-US/examples/LineBarAreaComposedChart).

It is the most popular library to date. It has more than 11k stars on Github, but a huge number (600 to date) of open issues as well. 

The documentation is quite extensive but lacks details in some parts. You can find a bunch of examples at [Rechart’s website](http://recharts.org), which could be a good starting point to building your own charts.

Recharts has a bunch of options for customization. Besides that, it allows low-level customization via custom SVG elements.

Here is how to build our stacked bar chart in Recharts:

_In this and all the following examples I'm using `colors`, `dateFormatter`, and `numberFormatter` variables. Here is how they are defined:_

```jsx
const numberFormatter = item => numeral(item).format("0,0");
const dateFormatter = item => moment(item).format("MMM YY");
const colors = ["#7DB3FF", "#49457B", "#FF7C78"];
```

```jsx
export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <ResponsiveContainer width="100%" height={300}>
    <BarChart data={resultSet.chartPivot()}>
      <XAxis tickFormatter={dateFormatter} dataKey="x" />
      <YAxis tickFormatter={numberFormatter} />
      {resultSet.seriesNames().map((series, i) => (
        <Bar
          stackId="a"
          dataKey={series}
          name={series.split(",")[0]}
          fill={colors[i]}
        />
      ))}
      <Legend />
      <Tooltip labelFormatter={dateFormatter} formatter={numberFormatter} />
    </BarChart>
  </ResponsiveContainer>
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/recharts" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

## Victory

[Victory](https://formidable.com/open-source/victory/) follows the same composable pattern as Recharts. It is developed by [Formidable](https://formidable.com), which has other solid open-source libraries besides Victory as well. It is the only library on the list that also works with React Native.

It’s the second most popular library after Recharts with more than 7K stars on Github, but has 5 times less open issues than Recharts. Victory has a [community chat on Spectrum](https://formidable.com/open-source/victory/).

It is [well documented](https://formidable.com/open-source/victory/docs/) and has an [examples gallery](https://formidable.com/open-source/victory/gallery/). 

Victory comes with two themes: grayscale and material, and allows you to create customer themes to have a consistent look across all the charts. 

Below you can see the code for our stacked bar chart with Victory:

```jsx
const transformResult = (series, resultSet) =>
  resultSet.chartPivot().map(element => ({ x: element.x, y: element[series] }));

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <div height={300}>
    <VictoryChart
      containerComponent={
        <VictoryVoronoiContainer
          voronoiDimension="x"
          labels={(d, i) => `${resultSet.seriesNames()[i]}: ${d.y}`}
          labelComponent={
            <VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />
          }
        />
      }
      domainPadding={{ x: 20, y: [0, 20] }}
    >
      <VictoryLegend
        colorScale={colors}
        data={resultSet.seriesNames().map(series => ({
          name: series.split(",")[0]
        }))}
        orientation="horizontal"
        y={275}
        x={130}
      />
      <VictoryAxis tickFormat={dateFormatter} tickCount={8} />
      <VictoryAxis dependentAxis />
      <VictoryStack colorScale={colors}>
        {resultSet.seriesNames().map((series, i) => (
          <VictoryBar key={i} data={transformResult(series, resultSet)} />
        ))}
      </VictoryStack>
    </VictoryChart>
  </div>
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/victory" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

## Nivo

As well as Recharts and Victory, [Nivo](https://nivo.rocks/) is built on top of D3 and is React-specific. But unlike previous libraries it is not composable. It provides one component per chart type and this component is configured via multiple props. Nivo is distributed as a set of packages for specific chart types, for example, `@nivo/bar`. So, one needs to install a specific package to use a specific chart type. 

The project itself is quite active; it has more than 5k stars on Github and almost 300 members in the [community chat](https://discordapp.com/invite/n7Ft74f).

It has interactive documentation, where you can build config for your chart.  Although it is nice, It lacks a good old text API reference and search option.  It also has a [Storybook with examples](https://nivo.rocks/storybook/). It helped me a lot to shortcut the time to build the first chart. Same as Victory, Nivo lets you create your own theme to have a consistent look across all the charts. 

We’re going to use the `@nivo/bar` package for our stack bar chart; you can find a code sample and CodeSandbox demo below.

```jsx
//https://github.com/plouc/nivo/issues/138#issuecomment-373015114
const ticksFormmater = (ticksCount, value, data, dateFormatter) => {
  const valueIndex = data.map(i => i.x).indexOf(value);
  if (valueIndex % Math.floor(data.length / ticksCount) === 0) {
    return dateFormatter(value);
  }

  return "";
};

export default ({ resultSet, colors, dateFormatter, numberFormatter }) => (
  <div style={{ height: 300 }}>
    <ResponsiveBar
      enableLabel={false}
      colors={colors}
      data={resultSet.chartPivot()}
      keys={resultSet.seriesNames()}
      indexBy="x"
      enableGridY={false}
      padding={0.3}
      margin={{ top: 60, right: 80, bottom: 60, left: 40 }}
      axisLeft={{
        format: numberFormatter
      }}
      axisBottom={{
        format: value =>
          ticksFormmater(8, value, resultSet.chartPivot(), dateFormatter)
      }}
      tooltip={({ id, value, color }) => (
        <strong style={{ color }}>
          {id.split(",")[0]}: {numberFormatter(value)}
        </strong>
      )}
      legends={[
        {
          anchor: "bottom",
          direction: "row",
          translateY: 50,
          itemsSpacing: 2,
          itemWidth: 150,
          itemHeight: 20,
          itemDirection: "left-to-right"
        }
      ]}
    />
  </div>
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/nivo" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

## BizCharts

[BizCharts](https://bizcharts.net/products/bizCharts) is React-specific visualization library based on [G2](https://github.com/antvis/g2), a visualization grammar. It is backed by Alibaba and plays nicely with Ant Design Framework. 

It has almost 4k stars on Github, but the majority of development is in Chinese, same for most of the documentation. I think the team is doing a great job of translating the docs, but it is still a work in progress.

Though, it lacks documentation in English the API is pretty straightforward. The only hard thing is to re-format the data into the specific format for the stacked chart.

```jsx
const stackedChartData = resultSet => {
  const data = resultSet
    .pivot()
    .map(({ xValues, yValuesArray }) =>
      yValuesArray.map(([yValues, m]) => ({
        x: resultSet.axisValuesString(xValues, ", "),
        color: resultSet.axisValuesString(yValues, ", "),
        measure: m && Number.parseFloat(m)
      }))
    )
    .reduce((a, b) => a.concat(b));

  return data;
};

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
      <Chart
        scale={{ x: { tickCount: 10 } }}
        height={400}
        data={stackedChartData(resultSet)}
        forceFit
      >
        <Axis name="x" label={{ formatter: dateFormatter }} />
        <Axis label={{ formatter: numberFormatter }} name="measure" />
        <Tooltip />
        <Geom
          type="intervalStack"
          position={`x*measure`}
          color={["color", colors]}
        />
        <Legend itemFormatter={item => item.split(",")[0]} />
      </Chart>
    )}
  />
);
```

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/bizcharts" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

## React-vis

[React-vis](https://uber.github.io/react-vis/) is being developed by Uber and seems quite active with 5.4k Github stars, 150 open issues, and a lot of recent commits. It is modular, like most of the libraries on the list. It comes with some nice default styles, which should be imported separately as CSS files.

Same as Nivo, it has Storybook with examples. The components API is also well documented. On the customization side you can control the look and feel via custom CSS styles. React-vis also provides a specific component for building custom SVG charts—[CustomSVGSeries](https://uber.github.io/react-vis/documentation/series-reference/custom-svg-series).

The API is similar to Victory's. You can see I'm using almost the same `transformResult` from Victory's snippet.

```jsx
const transformResult = (series, resultSet, dateFormatter) =>
  resultSet
    .chartPivot()
    .map(element => ({ x: Date.parse(element.x), y: element[series] }));

export default ({ resultSet, dateFormatter, colors, numberFormatter }) => (
  <XYPlot xType="time" height={300} width={500} stackBy="y">
    <XAxis tickFormat={dateFormatter} tickSize={8} />
    <YAxis />
    {resultSet.seriesNames().map((series, i) => (
      <VerticalBarSeries
        cluster="stack 1"
        key={i}
        color={colors[i]}
        data={transformResult(series, resultSet, dateFormatter)}
      />
    ))}
    <DiscreteColorLegend
      colors={colors}
      items={resultSet.seriesNames().map(i => i.split(",")[0])}
      orientation="horizontal"
      style={{ position: "absolute", left: 130, bottom: -30 }}
    />
  </XYPlot>
);
``` 

<iframe src="https://codesandbox.io/embed/4j4jlz33z0?fontsize=14&initialpath=/react-vis" title="React Visualization Libraries" css="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>

_If you don’t see your favorite library or just want me to add one more—just ping me in [this Public Slack Community](https://cubejs-community.herokuapp.com/). I’m happy to add as many libraries as I can to the list._

Recharts

Building a Recharts Dashboard with Cube

Understanding front-end data visualization tools ecosystem in 2021

Get Cube updates to your inbox

Building an Open Source Web Analytics Platform

React Visualization Libraries in 2019

Upgrade your data stack today