
I’ve worked for many years as a business intelligence (BI) consultant, building dashboards and reports for big companies. It’s not easy to build a dashboard with classic BI tools, and it’s even trickier if you want to embed elements in a classic [React](https://reactjs.org) web app. You’ll face various issues, including security, integration, and interactivity—not to mention the price tag.

This tutorial will walk you through building a custom dashboard that displays data from a [PostgreSQL](https://www.postgresql.org) database using [nivo](https://nivo.rocks/) and [Cube Cloud](https://cube.dev/). Here is the expected result:

![Final Dashboard](https://i.imgur.com/7nLVozg.png)

## What is Nivo?

Nivo is a React library that allows you to easily build charts and other dataviz elements. It’s built on top of the famous [D3](https://d3js.org/) library, but has even more visualizations and is optimized for easier, more intuitive use. Not only will you find the classic [bar](https://nivo.rocks/bar/) and [pie](https://nivo.rocks/pie/) charts, but you’ll also find new components, like [Funnel](https://nivo.rocks/funnel/), [CirclePacking](https://nivo.rocks/circle-packing/) and [Choropleth](https://nivo.rocks/choropleth/) to name a few.

One of the things that makes nivo stand out is that it comes with server-side rendering capabilities, though they’re not used in this tutorial. It’s also a fully declarative library that allows users to specify how a chart should render, right down to the last pixel. Here’s a simple example for a pie chart: 

```jsx
const MyResponsivePie = () => {

    const data = [
    {
        "id": "php",
        "value": 425,
    },
    {
        "id": "erlang",
        "value": 276,
    },
    {
        "id": "stylus",
        "value": 62,
    },
    ...
    ];

    return (<ResponsivePie
        data={data}
        margin={{ top: 40, right: 80, bottom: 80, left: 80 }}
        innerRadius={0.5}
        padAngle={0.7}
        cornerRadius={3}
        activeOuterRadiusOffset={8}
        borderWidth={1}
    />)
}
```

It will generate an SVG element that looks like this:

![nivo pie chart](https://imgur.com/0tiWaE2.png)

Compared to [Chart.js](https://www.chartjs.org/) or [Recharts](https://recharts.org/en-US/), nivo has a broader selection of components, and offers full control over how your data is displayed. The downside to nivo is that, as of this writing, there’s no native integration with Cube Cloud’s [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground), so building a dashboard with it requires a little more manual coding than some of the other options. 

## What is Cube?

[Cube](https://cube.dev/) is a Headless BI solution that lets you expose your database through a rich API that can be consumed by your React stack and, ultimately, the nivo charts you’ll build. Cube functions as a bridge, of sorts, between data stored in MySQL, PostgreSQL, and your front-end application.

![Cube quick architecture schema](https://i.imgur.com/HxVyW1e.png)

It’s a headless business intelligence engine, allowing you to manage the complexity of your data behind the scenes, and expose the information you want to show the consumer via multiple APIs. Then you just have to hook up the data to show it in the desired components. Cube also provides a [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground) that lets you build charts visually, further speeding up dashboard creation.

[Cube](https://cube.dev/) is available in two versions:

* an open-source version named **Cube** that you host and manage by yourself. It’s a good choice if you need to deploy Cube in a private cloud near your data source, or if you want to have full control over your architecture.
* a full-featured service named **Cube Cloud**, which offers [high availability and scalability](https://cube.dev/docs/cloud), and requires little management or maintenance.

## Build a Nivo Dashboard With Cube Cloud

Time to get your hands dirty. To follow along the tutorial, you’ll need a few things ahead of time:

* [`npm`](https://www.npmjs.com) and [`node`](https://nodejs.org/en/download/) on your laptop to build the React application that will host your dashboard
* `psql` command-line tool to load a script on the [ElephantSQL](https://www.elephantsql.com/) service. If you don’t already have it, you can follow this [tutorial](https://www.timescale.com/blog/how-to-install-psql-on-mac-ubuntu-debian-windows/) to install it.

That’s it—everything else will be covered in the tutorial. If you want to follow along in your own editor, the full tutorial is available as a [GitHub repo](https://github.com/julbrs/cube-nivo-tutorial).

### Initialize Your Database

If you already have a PostgreSQL database available online, you can use your own data as you follow along. If not, head over to [ElephantSQL](https://www.elephantsql.com/) and create a free account. ElephantSQL is a “PostgreSQL as a Service” solution with a free plan that will be very convenient for this tutorial.

After creating an account, create a new instance on the Tiny Turtle plan: 

![Create Instance ElephantSQL](https://i.imgur.com/BSClOHx.png)

Then you can select the region, ideally somewhere close to you. After selecting that, you’ll be able to see information related to your instance: 

![ElephantSQL Instance Details](https://i.imgur.com/0zmTqCi.png)

Make a note of your server name, user name, database, and password—you’ll need those later.

Now let’s add some data to your instance. You will download a sample e-commerce database script [here](http://cube.dev/downloads/ecom-dump.sql), and load it into your ElephantSQL instance. To form the command for this, use the following syntax:

```shell
psql -h <server> -U <user> < ecom-dump.sql
```

The `server` should be set to match the server from your instance detail page, which is likely something like `drona.db.elephantsql.com` (`user` can also be found on your instance details page, and should be changed to match your values; the password will be requested when you launch the command).

If it loads correctly, your terminal will show you a bunch of rows, indicating that the data is now loaded on the instance and available to run queries.

![Script Upload Success](https://i.imgur.com/ZRhvyBM.png)

You can check the data directly in the ElephantSQL interface, using the **Browser** tab. You should be able to see the tables list using the **Table queries** button, and be able to run some SQL queries like `SELECT * FROM "public"."users" LIMIT 100`, as shown below.

![ElephantSQL Browser Screen](https://i.imgur.com/faBQOb3.png)

That completes the first step. Now it’s time to move to Cube Cloud.

### Connect Cube Cloud

As mentioned previously, Cube offers two options: Open-source Cube and Cube Cloud. In this tutorial, you’ll be using **Cube Cloud**, as it comes with a [generous free tier](https://cube.dev/pricing/) to develop and test your application, and requires less setup. 

Start by creating a [Cube account](https://cubecloud.dev/auth).

![Cube Cloud Account](https://i.imgur.com/xACbOu0.png)

Next, create a new deployment. When selecting a region, try to choose the same region you chose for your ElephantSQL instance in order to optimize data transfers.

![Cube New Deployment](https://i.imgur.com/0bcTPjx.png)

Once you’ve gotten familiar with Cube, it’s possible to link your Cube Cloud instance to a GitHub repository, creating powerful CI integration. For now, though, select **Create** to start from an empty project. 

![Cube New Deployment Create](https://i.imgur.com/96aKgSR.png)

It’s time to connect to your backend database. First, select **PostgreSQL** as the database: 

![Select Database Engine](https://i.imgur.com/UTrYNhg.png)

Finally, enter the database credentials from the ElephantSQL instance details screen:

* Server Name
* Database
* Username
* Password

![Enter Database Credentials](https://i.imgur.com/SkyyaG3.png)

Cube will ask you to generate the data schema. This is a Cube concept that will let you associate tables and fields to API objects. In this tutorial, we will generate them using the built-in generator, but it’s also possible to customize them. Take a look at the [documentation](https://cube.dev/docs/schema/getting-started) for more information about how schemas work, and how to generate your own.

![Generate Data Schema](https://i.imgur.com/qfdpqQ9.png)

Give your instance a couple of seconds to spin up, and you’ll be taken to the **Overview**, as shown below:

![Cube Cloud Overview](https://i.imgur.com/e9M2Tto.png)

Here is a brief tour of the left menu:

* **Playground** is the [Developer Playground](https://cube.dev/docs/dev-tools/dev-playground), which will let you play with your data, build test charts, and more. It can also help you to generate code for multiple frameworks. In this tutorial, you’ll use it to generate some of the code for your nivo dashboard.
* **Schema** exposes the generated schema. Each JavaScript file describes a `cube` that is tied to a single SQL query, with specific links to other `cubes` and metrics.
* **Queries** gives you a historical view of the queries handled by Cube (API side and database side)
* **Pre-Aggregations** keeps you up to date about the batch jobs that are building pre-aggregations. It’s a practical solution to reduce the query duration when you have a large database. A good introduction on this topic is available in the [documentation](https://cube.dev/docs/caching/pre-aggregations/getting-started)!

Let’s start building your first chart using the Playground. Select `Users Count` as a measure, `Users City` as a dimension, and a `Bar` chart type. Click **Run**, and Cube will display your first chart.

![Your First Chart](https://i.imgur.com/JL8sbUM.png)

The Playground is the best place to play with the data and get a better idea of the best representation to show a given metric or trend. The only downside is that there’s no way to generate a nivo chart. This won’t stop you from building a nivo dashboard, though!

### Build Your Nivo Dashboard

Bootstrap a new React application using [Create React App](https://create-react-app.dev/):

```shell
npx create-react-app nivo-dashboard
```

You’ll need to add a few packages. `@nivo/*` will allow us to build nivo components. `@cubejs-client/core` is the basic cube library, and `@cubejs-client/react` provides components and hooks that you’ll use later.

```shell
cd nivo-dashboard/
npm add @nivo/core @nivo/bar @nivo/pie @nivo/bump @cubejs-client/core @cubejs-client/react
```

Start your application with the following command, and it will open a browser to `http://localhost:3000` with the default start page:

```shell
npm start
```

Now you need to connect from React to your Cube application. Go back to the **Overview**, and click on the **How to connect your application** link in the **REST API** section, then select the **React** tab. It will give you some code to copy-paste in your application. Be aware that it’s sensitive information, as it contains an API token and the endpoint of your Cube API. Later, you can store this information in dedicated environment variables to avoid pushing it to a Git repository. 

![Connecting to REST API](https://i.imgur.com/7h4GG9X.png)

To start building your dashboard, you’ll build a bar chart, just like the one you built earlier in the Developer Playground. In a new `src/charts/UsersPerCity.js` file, start by creating a simple component:

```jsx
import { ResponsiveBar } from "@nivo/bar";
import { useCubeQuery } from "@cubejs-client/react";

const UsersPerCity = () => {
  // use hook to grab data from Cube
  const { resultSet, isLoading, error, progress } = useCubeQuery({
    measures: ["Users.count"],
    timeDimensions: [],
    order: {
      "Users.count": "desc",
    },
    dimensions: ["Users.city"],
  });

  if (isLoading) {
    return (
      <div>
        {(progress && progress.stage && progress.stage.stage) || "loading"}
      </div>
    );
  }

  if (error) {
    return <div>{error.toString()}</div>;
  }

  if (!resultSet) {
    return null;
  }

  const dataSource = resultSet.tablePivot();

  return (
    <div style={{ height: "250px", width: "100%" }}>
      <ResponsiveBar
        data={dataSource}
        keys={["Users.count"]}
        indexBy="Users.city"
        margin={{ top: 0, bottom: 80, left: 60 }}
        colors={{ scheme: "accent" }}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 45,
          legendOffset: 32,
        }}
      />
    </div>
  );
};

export default UsersPerCity;
```

This uses the [hook](https://reactjs.org/docs/hooks-intro.html) `useCubeQuery`, provided by Cube, for a specific query: 

```json
{
    measures: ["Users.count"],
    timeDimensions: [],
    order: {
      "Users.count": "desc",
    },
    dimensions: ["Users.city"],
  }
```

You can retrieve this query from the **JSON Query** panel of the Playground:

![Developer Playground: JSON query](https://i.imgur.com/WdIcm8o.png)

The hook lets you easily handle the loading state (`isLoading`) and provides you a `resultSet` object that contains the JSON representation of the data to show on your bar chart.

With the data acquired, you’re simply using the `ResponsiveBar` from nivo to render the bar chart with the `resultSet` object:

```jsx
  const dataSource = resultSet.tablePivot();

  return (
    <div style={{ height: "250px", width: "100%" }}>
      <ResponsiveBar
        data={dataSource}
        keys={["Users.count"]}
        indexBy="Users.city"
        margin={{ top: 0, bottom: 80, left: 60 }}
        colors={{ scheme: "accent" }}
        axisBottom={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 45,
          legendOffset: 32,
        }}
      />
    </div>
  );
```

Now we can open `src/App.js` to display the chart. To do that, replace the contents of `src/App.js` with the following:

```jsx
import UsersPerCity from "./charts/UsersPerCity";
import cubejs from "@cubejs-client/core";
import { CubeProvider } from "@cubejs-client/react";

const cubejsApi = cubejs(
  "API_TOKEN",
  {
    apiUrl:
      "API_ENDPOINT",
  }
);

function App() {
  return (
    <CubeProvider cubejsApi={cubejsApi}>
      <UsersPerCity />
    </CubeProvider>
  );
}

export default App;
```

This first initializes the `cubejsApi` with your token and API endpoint. Don’t forget to add your API token and endpoint, which you got from the Cube Overview screen.

Then you’re using `CubeProvider`, which will provide the Cube context to all components below. It’s possible to pass `cubeJsApi` directly to `useCubeQuery`, but doing it for all components at once is much easier when you’re working with more charts.

Finally, you use your brand new `UsersPerCity` component. If everything’s working correctly, `http://localhost:3000` will display a chart like this:

![nivo chart on React app](https://i.imgur.com/XmpS69Z.png)

Congratulations—you’ve made it!

At this point, you can customize your application by making it interactive. For example, if you need to add a filter to show only a specific city on the graph, you can take advantage of the `filter` section in the JSON query, and test it on the **Developer Playground**. Then you can add a new input component in your React application, and set up the `useState` hook to dynamically pass the input value to the Cube query. You can learn more about filtering in the query in the [Cube documentation](https://cube.dev/docs/query-format#filters-format).

Now that you have the basics down, you can continue to add more charts and polish your application. For reference, the complete React app with all four charts, as shown at the beginning of the tutorial, is available in [this GitHub repo](https://github.com/julbrs/cube-nivo-tutorial).

## Get Ready To Learn More

You’ve just scratched the surface of Cube in this tutorial. For example, you haven’t yet spent time customizing [schemas](https://cube.dev/docs/schema/fundamentals/concepts). But when you start modifying the schema of your Cube files, Cube Cloud gives you easy tools to manage that. You can link your instance to a specific GitHub repository (to host schema files), and the **Development Mode** will allow you to test the modification or to deploy a custom branch.

![Development Mode](https://i.imgur.com/kiFYRCJ.png)

You can learn more in the [documentation about the Cube IDE](https://cube.dev/docs/cloud/dev-tools/cube-ide).

## What Have You Learned Today?

Adding Cube to the equation is a quick and easy way to enhance the user experience of your application. Instead of spending developer time to build this kind of chart from scratch, it’s much more efficient to first design them within the Developer Playground, then integrate them into your application with just a few lines of code, like you did in this tutorial.

To continue the journey, you could take a look at the promising new API available with Cube. It allows you to interact with Cube using [GraphQL](https://en.wikipedia.org/wiki/GraphQL) instead of REST. This [blog post](https://cube.dev/blog/introducing-cube-graphql/) explains how this can be a game changer. You can also try out the [SQL API](https://cube.dev/docs/backend/sql). It allows you to use Cube for MySQL-compatible queries, enabling you to connect to [any business intelligence solution that supports SQL](https://cube.dev/blog/introducing-cube-sql/).

Finally, don’t hesitate to ping the Cube team on [Slack](https://slack.cube.dev/)—they’re very responsive, and always happy to help new users.


Julien Bras

Declarative charts built on top of D3.js and React, server-side rendering included.

Simple yet flexible JavaScript charting for designers and developers.

Chart.js

Open-source JavaScript visualization library with enormous pre-defined charts.

Apache ECharts

Interactive charting service and JavaScript library by Google.

Google Charts

Nivo

Declarative and composable charting library built with React and D3.js.

Recharts

Charting libraries and other tools to render data in browsers and mobile devices.

Data Visualization

Declarative component-based JavaScript library originally created by Facebook.

React

Web framework for React web applications by the Vercel team providing SSR & SSG.

Next.js

Approachable, performant, and versatile JavaScript framework.

Fully extensible web developer's platform.

Angular

Popular front-end frameworks for developing modern web applications.

Front-end Frameworks

Internal tool builders with a convenient UI and readily available components.

Low-Code Tools

Convenient APIs to access and consume analytics on the frontend.

APIs

Stories and real-life examples of building modern data applications.

Best Practices

Solutions to popular and sophisticated data engineering problems.

Use Cases

Front-end applications and low-code tools to bring data insights to end users.

Application Development

Building a nivo Dashboard with Cube

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/@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/@cubejs-client-core#result-set-chart-pivot) 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](http://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://spectrum.chat/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._

Nivo

Building a nivo Dashboard with Cube

React Visualization Libraries in 2019