Ext JS to React: Charting

This is part of the Ext JS to React blog series. You can review the code from this article on the Ext JS to React Git repo.

React doesn’t ship with any visualization components, but fortunately there are a few very nice pre-built charting packages out there for us: D3 visualization library, Victory Charts, and Recharts amongst others. Through the course of this article, we’ll narrow our focus by looking only at Recharts as a replacement for the charts package available with Ext JS. The examples presented below demonstrate some of the more common chart types used. As you look over the Recharts examples and API, you’ll see that the offering is fairly robust with a multitude of configuration options available for each chart type. Additionally, they’re MIT licensed so you got that going for you, which is nice.

Note: While not a requirement for React, this article’s code examples assume you’re starting with a starter app generated by create-react-app.

Install Recharts

npm install --save recharts

Recharts has a number of charting options available that we won’t use in each of the examples below. However, let’s mention a few of them, as they’ll likely be features you’ll want in your charts:

• ReponsiveContainer: A wrapping container that sizes child charts to the size of a parent container
• Legend: The legend used to label the series elements of the chart
• Tooltip: A floating tooltip element corresponding to the chart’s data points
• Cell: A styling element that can be used to set unique styles on one or more elements in Pie, Bar, and RadialBar charts

Sample Chart Data

All of the charts require an array of data objects in order to populate their series. The dataset we’ll use for all of the following chart examples will be located in src/data.js:

export default [
  {name: 'Page A', uv: 4000, pv: 2400},
  {name: 'Page B', uv: 3000, pv: 1398},
  {name: 'Page C', uv: 2000, pv: 9800},
  {name: 'Page D', uv: 2780, pv: 3908},
  {name: 'Page E', uv: 1890, pv: 4800},
  {name: 'Page F', uv: 2390, pv: 3800},
  {name: 'Page G', uv: 3490, pv: 4300}
];

Note: For charts with multiple overlapping series, the series are painted in layers in the order they’re composed within the parent ComposedChart component. This means that if we have a Line and Bar series, and we want the line to appear on top of the bars, we’ll need to define the Bar series first and then the Line:

<ParentChart>
  {/* Bar is listed first and draw first so it will be on bottom*/}
  <Bar />
  {/* Line is listed last and draw last so it will be on top */}
  <Line />
</ParentChart>

Cartesian Charts

Axis Options

Cartesian charts can be decorated with an XAxis (top and bottom) and YAxis (left and right). The axis can be distributed naturally or logarithmically. For the remaining examples, we’ll keep the axis configurations pretty simple, but the API certainly deserves a deeper look to see just how flexible the package is.

Bar (Column) Chart

The first chart we’ll take a look at is the BarChart using the Bar series. Each bar chart is configurable with a layout prop to orient the bar series as “horizontal” or “vertical”. The default is “horizontal” which renders the bars from the series across the x-axis in what is referred to in Ext JS chart examples as a “column chart”.

The following chart produces a bar chart with a grid overlay, legend, and two bar series:

import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend} from 'recharts';
import data from './data';

export default () => {
  return (
    <BarChart width={730} height={250} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Legend />
      <Bar dataKey="pv" fill="#8884d8" />
      <Bar dataKey="uv" fill="#82ca9d" />
    </BarChart>
  );
};

You can review the sample code on the Git repo.

Bar Chart (Flipped)

The same chart can be displayed with the series oriented vertically. The bar series’ layout prop can be set as “vertical” in order to orient the bars along the y-axis, the same as configuring flipXY: true on the Ext JS cartesian charts. The XAxis defaults to type “category” and the YAxis to “number”. In the following example, we flip those so that the category is aligned along the left edge.

import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend} from 'recharts';
import data from './data';

export default () => {
  return (
    <BarChart width={730} height={250} data={data} layout="vertical">
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis type="number"/>
      <YAxis dataKey="name" type="category"/>
      <Legend />
      <Bar dataKey="pv" fill="#8884d8" />
      <Bar dataKey="uv" fill="#82ca9d" />
    </BarChart>
  );
};

You can review the sample code on the Git repo.

Stacked Chart

Bar charts can render its series as stacked by setting stackId on each Bar component. Series whose stackId values match will be stacked together: This is similar to setting stacked: true on Ext JS’s Bar, Area, or Bar3D charts.

import React from 'react';
import {BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend} from 'recharts';
import data from './data';

export default () => {
  return (
    <BarChart width={730} height={250} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Legend />
      <Bar dataKey="pv" stackId="a" fill="#8884d8" />
      <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
    </BarChart>
  );
};

You can review the sample code on the Git repo.

Line Chart

By switching over to a LineChart and the Line series components we can represent the same dataset with a line connecting data points. The series color is set with stroke instead of fill since we’ve switched from polygons to lines in the series. The type prop determines the shape of the line. In this case, “monotone” is set to apply a smoothing effect.

import React from 'react';
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Legend} from 'recharts';
import data from './data';

export default () => {
  return (
    <LineChart width={730} height={250} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Legend />
      <Line type="monotone" dataKey="pv" stroke="#8884d8" />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  );
};

You can review the sample code on the Git repo.

Area Chart

The AreaChart component renders out the same as a line chart, but with the lower portion of the series filled in. By setting a fill color and fillOpacity of the Area series below, we can add the shading below the line.

import React from 'react';
import {AreaChart, Area, XAxis, YAxis, CartesianGrid, Legend} from 'recharts';
import data from './data';

export default () => {
  return (
    <AreaChart width={730} height={250} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Legend />
      <Area type="monotone" dataKey="pv" fill="#8884d8" fillOpacity={.6} />
      <Area type="monotone" dataKey="uv" fill="#82ca9d" fillOpacity={.6} />
    </AreaChart>
  );
};

You can review the sample code on the Git repo.

Scatter Chart

The same dataset can be plotted using a ScatterChart by creating a point at the intersection of two data points across the x and y-axis. To do this we’ll employ the ScatterChart and Scatter series components. The data prop is dropped from the chart component itself and moved to the series. Both the x and y-axis receive a dataKey prop corresponding to the key from our dataset they’re meant to track with.

import React from 'react';
import {ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Legend} from 'recharts';
import data from './data';

export default () => {
  return (
    <ScatterChart width={730} height={250}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="uv" />
      <YAxis dataKey="pv" />
      <Legend />
      <Scatter name='uv / pv' data={data} fill='#8884d8'/>
    </ScatterChart>
  );
};

You can review the sample code on the Git repo.

Combined Series Chart

The Line, Area, and Bar series can be combined on the same chart using ComposedChart. Each series may be configured with their own dataKey or may use the same one if two series should display the same data. In the example below, we’ll have the two series represent the same data from the dataset by using dataKey="uv":

import React from 'react';
import {ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Legend} from 'recharts';
import data from './data';

export default () => {
  return (
    <ComposedChart width={730} height={250} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Legend />
      <Bar dataKey="uv" fill="#8884d8" />
      <Line dataKey="uv" stroke="#82ca9d" />
    </ComposedChart>
  );
};

You can review the sample code on the Git repo.

Polar Charts

Pie Chart

We can use the same example dataset from the cartesian charts to render a polar charts such as the PieChart. The label prop in the Pie series creates callout labels for each slice.

import React from 'react';
import {PieChart, Pie} from 'recharts';
import data from './data';

export default () => {
  return (
    <PieChart width={350} height={300} data={data}>
      <Pie data={data} dataKey="uv" fill="#8884d8" label/>
    </PieChart>
  );
};

Love the look of donut charts? Simply set the Pie component’s internalRadius prop to a percentage smaller than the outerRadius (which defaults to 80%) to create a donut chart from the pie chart.

You can review the sample code on the Git repo.

Radar Chart

The RadarChart component is another polar chart, but with a child component list closer to what we’re used to seeing in the cartesian charts. Radar charts have two axis components. PolarAngleAxis serves to label the data points using the “name” key from our dataset. PolarRadiusAxis creates the linear axis line and labels across the chart to indicate the steps along the radial portions of the chart (seen as 0 – 10000 in the example below).

import React from 'react';
import {RadarChart, Radar, PolarGrid, Legend, PolarAngleAxis, PolarRadiusAxis} from 'recharts';
import data from './data';

export default () => {
  return (
    <RadarChart width={350} height={300} data={data}>
      <PolarGrid gridType="circle" />
      <Legend />
      <PolarAngleAxis dataKey="name" />
      <PolarRadiusAxis angle={90} />
      <Radar name="uv" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6}/>
      <Radar name="pv" dataKey="pv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6}/>
    </RadarChart>
  );
};

You can review the sample code on the Git repo.

Wrap Up

There are quite a few quality options for pre-built charts libraries out there for use in your React projects. Some of them are free and open source like Recharts while some carry a commercial license. We liked Recharts quite a bit for most use cases, though Victory Charts from Formidable caught our eye as well. You can even use the venerable D3 visualization library in your React projects (which we did ourselves on our sample Budgeting App). Or maybe make your own charts lib, you rockstar, you!

If through your travels you’ve found / authored a favorite charts library, please share in the comments section!