React Js Area Series Chart with React vis Tutorial

React area chart tutorial; Data visualization enhances the chances of success, and it plays a significant role in business communication.

Today in this tutorial, we will understand how to create an area chart in React js application. To implement a line chart in React, we will use the react-vis package.

React vis library deals with charts and graphs and profoundly helps in data visualization, following principles implied within this package: friendliness to react, top-notch customization, expressive (supports various types of charts).

Area charts are best used for embedding or displaying graphically quantitative data. The portion among lines is ideally denoted with textures, colors, and hatchings.

How to Create Area Chart in React js App with react-vis

  • Step 1: Install New React Project
  • Step 2: Add react-vis Package
  • Step 3: Create React Vis Area Chart Component
  • Step 4: Add Component in App Js
  • Step 5: View App in Browser

Install New React Project

This data visualisation journey begins with creating a brand new react
application.

Jump on the command line, enter the suggested command and execute it to install the new app.

npx create-react-app carthium

Thereafter, use the command to move into the app directory.

cd carthium

Add react-vis Package

To use react vis library in your newly react application, run the given command from the command line to install it.

npm install react-vis --force

Create React Vis Area Chart Component

Creating an area chart with react-vis is easy; just import the required dependencies from the react-vis package.

Use the chart tags to display the area chart; you can customize the area chart using the reat-vis properties.

Create components/VisChart.js file, thereafter insert the suggested code within the file.

import React from 'react'
import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  VerticalGridLines,
  AreaSeries,
} from 'react-vis'

const chartData = [
  { x: 1, y: 10 },
  { x: 2, y: 5 },
  { x: 3, y: 15 },
]

export default function VisChart(props) {
  return (
    <>
      <h2>React Js Animated Area Chart Example</h2>
      <XYPlot width={600} height={400}>
        <HorizontalGridLines />
        <VerticalGridLines />
        <XAxis />
        <YAxis />
        <AreaSeries
          className="area-series-example"
          curve="curveNatural"
          data={chartData}
        />
      </XYPlot>
    </>
  )
}

Add Component in App Js

The VisChart.js chart component is ready, move towards the App.js and add your component.

Open and add the offered code into the main app js file.

import './App.css';
import VisChart from './components/VisChart';

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

export default App;

View App in Browser

Now you are ready to view the app on the browser.

First, head over to command prompt use command to start the react app.

npm start

After executing the above command, your app will run and can be viewed on the printed URL on the terminal.

React Js Area Series Chart with React vis Tutorial

Summary

In this tutorial, we have seen how to add an area chart in react app with the help of the third-party package. We saw the nitty-gritty of react-vis charts, understood how to align this package in react from scratch.