Data Engineering

Best React Charting Libraries for Data Visualization and Analytics

React’s component-based architecture allows you to install charting libraries that help you easily create charts without starting from scratch. We’ve selected our favorite charting libraries for your next data visualization or analytics project.

Photo by Isaac Smith on Unsplash

Creating charts for data visualization and analytics is difficult by hand, illustrated by this drawing of a line chart on graph paper with a pen and ruler on a wooden table, so we’ve selected our favorite React charting libraries: Recharts, Echarts for React, React ChartJS 2, and VISX.

One of the most important aspects of any web application is how data is displayed. As a React developer, the chances are that sooner or later, you will need to represent data fetched from an API in a chart or a graph to make it more understandable for the end user. One of the nice things about React is that its component-based architecture lends itself to being able to install libraries that allow you to easily create charts without having to start from scratch.

The charting libraries we’ll look at today are JavaScript libraries that generate charts by reading the input data and rendering it as a visualization, such as a graph or a chart. Most libraries support common data visualizations such as area charts, line graphs, bar graphs, and pie charts, and some go much further, including things like scatter plots, tree maps, and radar charts. Many of the most popular charting libraries have been packaged for use with React and are ready to use in your React applications.

Selecting a Charting Library for Data Visualization in React

Not all charting libraries are created equal. You’ll want to look for a charting library that’s simple to use, integrates seamlessly with your application, and serves your project’s needs. In this post, we’ll look at the best React charting libraries to work with in 2022, so you’re prepared to choose the right charting library for your project. The libraries discussed in this article have been selected for their ease of use, community support, and customizability.

Recharts

With 18.3k stars on GitHub, 1.4k forks, and 185 watchers at the time of writing, Recharts is a charting library built with D3 and React, and released under the MIT License. This library averages around 900,000 weekly downloads, and has an unpacked size of 5.1 MB. It has well-structured documentation that is easy to follow, a robust group of over two hundred contributors on GitHub, and an enormous community, with over 85k users on GitHub.

It is based on React’s principle of reusable components, which makes it easy for developers to build charts with reusable React components, and has native SVG support. Recharts provides appealing charts out of the box, and it allows you to customize them by tweaking component props and passing in custom components. It also allows users to edit the provided reusable components, customizing them to fit their needs. The charts provided by this library are not inherently mobile responsive. This problem can be solved by integrating them into a responsive wrapper component to enable them to adjust to the width of the devices easily.

To get started with Recharts, you can install it using npm or any other method discussed in the official documentation.

$ yarn add recharts

Below is the code to create a simple line chart with a Cartesian grid, an x-axis, and a y-axis using Recharts:

import { LineChart, Line, CartesianGrid, YAxis, XAxis } from "recharts"

const chartData = [
  {
    name: "Item 1",
    uv: 400,
    pv: 1500,
    amt: 1500,
  },
  {
    name: "Item 2",
    uv: 300,
    pv: 1500,
    amt: 1500,
  },
  {
    name: "Item 3",
    uv: 350,
    pv: 1500,
    amt: 1500,
  },
  {
    name: "Item 4",
    uv: 200,
    pv: 1500,
    amt: 1500,
  },
  {
    name: "Item 5",
    uv: 280,
    pv: 1500,
    amt: 1500,
  },
]

function App() {
  return (
    <LineChart width={500} height={500} data={chartData}>
      <Line type="monotone" dataKey="uv" stroke="green" />
      <CartesianGrid stroke="gray" />
      <YAxis />
      <XAxis dataKey="name" />
    </LineChart>
  )
}

export default App

Here is the line graph produced by the above code via our Codesandbox template for Recharts React:

ECharts for React

ECharts is licensed under the MIT License, and at the time of writing, has 3.7k stars, 503 forks, and 68 watchers on GitHub. It’s a React wrapper for Apache ECharts. It averages over 100,000 weekly downloads and has an unpacked size of 74.6 kB.

ECharts is a powerful, free charting library that enables developers to seamlessly integrate highly interactive, customizable, and responsive charts into their React websites. This charting library is easy to use, as it requires the developer to only define the required options for the chart in an object, and then pass them to the ReactEcharts component as a prop. This library has an actively growing developer community of over 12k users on GitHub. Some developers may find the state of the documentation lacking, and because the documentation doesn’t offer any walkthroughs, beginners may find it difficult to follow.

To get started with ECharts, run this command in the terminal:

$ yarn add echarts-for-react echarts

This also installs Apache ECharts as a required dependency.

Use the code below to create a simple bar graph with ECharts for React:

import ReactEcharts from "echarts-for-react"

const options = {
  grid: { top: 20, right: 40, bottom: 20, left: 40 },
  xAxis: {
    type: "category",
    data: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [400, 300, 350, 200, 280],
      type: "bar",
      smooth: true,
    },
  ],
  tooltip: {
    trigger: "axis",
  },
}

function App() {
  return (
    <ReactEcharts
      option={options}
      style={{ width: "600px", height: "300px" }}
    ></ReactEcharts>
  )
}

export default App

This is the output produced by the code above via our Codesandbox template for ECharts for React:

React ChartJS 2

React ChartJS 2 is a React charting library licensed under the MIT License. At the time of writing, it has 5.1k stars, 1.1k forks, and 48 watchers on GitHub. It averages over 500,000 weekly downloads and has a minimized size of 54.9 kB.

The React ChartJS 2 library provides React components for versions two and three of the well-known Chart.js library. This charting library is easy to use, as it comes with different types of responsive components such as bar, scatter, doughnut, and pie charts, allowing the developer to easily pass in the required props and render charts. It has a rapidly growing community on Slack, more than 140k users on GitHub, and well-structured documentation that is easy to follow as a beginner.

To get started with this library, run the following command in the terminal:

$ yarn add chart.js react-chartjs-2

The code below creates a simple line chart with this library:

import { Line } from "react-chartjs-2"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Legend,
} from "chart.js"

function App() {
  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Legend
  )

  const data = {
    labels: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
    datasets: [
      {
        label: "Items",
        data: [400, 300, 350, 200, 280],
        borderColor: "black",
        backgroundColor: "white",
      },
    ],
  }
  return (
    <Line
      data={data}
      options={{
        responsive: true,
      }}
    />
  )
}

export default App

This is the line chart produced by the code above via our Codesandbox template for React ChartJS 2:

VISX

VISX, short for visualization components, is licensed under the MIT License and at the time of writing, has 15.3k stars, 588 forks, and 151 watchers on GitHub. The full library has 9.4k weekly downloads and an unpacked size of 12 kB. Due to its modular nature, though, this is a poor illustration of the library’s popularity; some of its packages, such as @visx/shape and @visx/point, consistently see over 120k downloads a week. VISX was developed by Airbnb, and it contains several reusable visualization components.

This library combines the power of D3.js to perform complex calculations under the hood and React to update the DOM. It’s split into multiple small packages, which avoids bloat by allowing developers to download only the packages they need. It is also unopinionated, in that it enables developers to use their own animation and state management libraries. Since VISX assumes you’re using React, it allows you to choose any React-compatible animation library.

VISX is easy to use for developers with React knowledge and enables the developer to customize it as needed by building their own reusable chart components. The use of small, D3-based primitive visualization components gives you the freedom to build complex visualizations. It has well-structured documentation with a gallery of examples to help you get started easily, and has a growing community of over 1.7k users on GitHub.

To get started with this library, run the following command in the terminal:

$ yarn add @visx/visx

To create a simple bar chart with this library, use the code below:

import { Group } from "@visx/group"
import { Bar } from "@visx/shape"
import { scaleLinear, scaleBand } from "@visx/scale"
import { Text } from "@visx/text"

const data = [
  { item: "Item 1", amount: 400 },
  { item: "Item 2", amount: 300 },
  { item: "Item 3", amount: 350 },
  { item: "Item 4", amount: 200 },
  { item: "Item 5", amount: 280 }
]

// dimensions and margins
const width = 600
const height = 300
const margin = { top: 10, bottom: 10, left: 10, right: 10 }

// creating bounds
const xMax = width - margin.left - margin.right
const yMax = height - margin.top - margin.bottom

// helpers for accessing the data
const x = (dt) => dt.item
const y = (dt) => +dt.amount

// scaling the graph with the available data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(x),
  padding: 0.4
})
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(y))]
})

// Calculate point functions
const compose = (scale, accessor) => (data) => scale(accessor(data))
const xPoint = compose(xScale, x)
const yPoint = compose(yScale, y)

function App() {
  return (
    <svg width={width} height={height}>
      {data.map((dt) => {
        const barHeight = yMax - yPoint(dt)
        return (
          <Group key={`bar-${dt.item}`}>
            <Bar
              x={xPoint(dt)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="blue"
            />
            <Text
              x={Math.floor(xPoint(dt) + 6)}
              y={yMax + 18}
              width={xScale.bandwidth() - 12}
              scaleToFit={true}
            >
              {dt.item}
            </Text>
          </Group>
        )
      })}
    </svg>
  )
}

export default App

This is the bar chart produced by the code above via our Codesandbox template for React VISX:

Conclusion: The Best React Charting Libraries for Data Visualization and Analytics

In this article, you’ve learned about the best React charting libraries that you can use to visualize data in an appealing way in your React app: Recharts, Echarts for React, React ChartJS 2, and VISX. These libraries each have their strengths, whether that’s allowing for a great deal of customization, excellent documentation, or well-established communities.

Propel Data is a serverless analytics API platform that enables developers to build analytics products powered by large-scale data. Propel helps developers offload the tedious job of managing additional complex data infrastructure or creating new data silos by leveraging the already available data in the warehouse. The data is then operationalized and served via the low-latency APIs, which enables you to quickly build insights dashboards, advanced reporting, usage metering, and product metrics.

Propel Data offers a GraphQL API for data analytics that allows you to define Metrics and easily build time series charts, a data serving layer that caches data from the data warehouse and serves it blazingly fast, and a data access policy engine that ensures only authorized end users can access their data. If you’re interested in what we’re doing, sign up for our monthly product updates, follow us on Twitter @propeldatacloud, or join our waitlist to try the product yourself.

Related Content

In-product analytical dashboards, like the one shown in this photograph, typically require data engineers to construct, while data analysts tend to be involved in manual reporting of data analytics. In comparison, data scientists are frequently found working on scientific or machine learning projects.

Data Engineering

What Is the Difference Between a Data Engineer, a Data Scientist, and a Data Analyst?

In the “Big Data” industry, there are big differences among the work responsibilities of data scientists, data engineers, and data analysts.