React Js Bar Chart using React vis Library Tutorial

React vis bar chart tutorial. Charts not just show information but also make the information easy to understand. In this tutorial, we will show you how to create a Bar chart in React application from scratch.

To create the React bar chart component, we will use the react-vis package. This library provides an eloquent user experience and offers tons of charts that you can embed in your react application.

A bar chart or bar graph is a chart or graph that displays specific data with rectangular bars with heights or lengths comparative to the values that they represent.

In a bar graph, bars can be plotted vertically or horizontally. Seldom, a vertical bar chart is known as a column chart.

How to Implement Bar Chart in React using react-vis Library

  • Step 1: Install New React Project
  • Step 2: Add react-vis Package
  • Step 3: Integrate Bar Chart
  • Step 4: Register Chart Component
  • Step 5: Test Application

Install New React Project

In the first place we have to install the new react project, here is the command that you need to execute.

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

npx create-react-app carthium

Step inside the project folder.

cd carthium

Add react-vis Package

Next, you have to install the react-vis library, hence run the command to install the react-vis package.

npm install react-vis --force

Integrate Bar Chart

In this step, we will learn how to build the bar chart component, so create the components/VisChart.js file after copy the given code and paste within the component file.

import React from 'react'

import {
  XYPlot,
  XAxis,
  YAxis,
  VerticalGridLines,
  HorizontalGridLines,
  VerticalBarSeries,
  VerticalBarSeriesCanvas,
  DiscreteColorLegend,
} from 'react-vis'

export default class VisChart extends React.Component {
  state = {
    useCanvas: false,
  }
  render() {
    const { useCanvas } = this.state
    const BarSeries = useCanvas ? VerticalBarSeriesCanvas : VerticalBarSeries
    const content = useCanvas ? 'TOGGLE TO SVG' : 'TOGGLE TO CANVAS'

    return (
      <div>
        <h2>React Vis Bar Chart Example</h2>
        <button
          onClick={() => this.setState({ useCanvas: !useCanvas })}
          buttoncontent={content}
        >
          Update
        </button>
        <XYPlot
          className="clustered-stacked-bar-chart-example"
          xType="ordinal"
          stackBy="y"
          width={500}
          height={300}
        >
          <DiscreteColorLegend
            style={{ position: 'absolute', left: '50px', top: '10px' }}
            orientation="horizontal"
            items={[
              {
                title: 'Apples',
                color: '#12939A',
              },
              {
                title: 'Oranges',
                color: '#79C7E3',
              },
            ]}
          />
          <VerticalGridLines />
          <HorizontalGridLines />
          <XAxis />
          <YAxis />
          <BarSeries
            cluster="2015"
            color="#12939A"
            data={[
              { x: 'Q1', y: 10 },
              { x: 'Q2', y: 5 },
              { x: 'Q3', y: 15 },
              { x: 'Q4', y: 20 },
            ]}
          />
          <BarSeries
            cluster="2015"
            color="#79C7E3"
            data={[
              { x: 'Q1', y: 3 },
              { x: 'Q2', y: 7 },
              { x: 'Q3', y: 2 },
              { x: 'Q4', y: 1 },
            ]}
          />
          <BarSeries
            cluster="2016"
            color="#12939A"
            data={[
              { x: 'Q1', y: 3 },
              { x: 'Q2', y: 8 },
              { x: 'Q3', y: 11 },
              { x: 'Q4', y: 19 },
            ]}
          />
          <BarSeries
            cluster="2016"
            color="#79C7E3"
            data={[
              { x: 'Q1', y: 22 },
              { x: 'Q2', y: 2 },
              { x: 'Q3', y: 22 },
              { x: 'Q4', y: 18 },
            ]}
          />
        </XYPlot>
      </div>
    )
  }
}

Register Chart Component

In the next step, you will be adding the VisChart.js chart component in the main app component.

Now, you have to insert the following code in the App.js file.

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

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

export default App;

Test Application

In the final step, we have to test the app and check what is the output of the above code.

npm start

React Js Bar Chart using React vis Library Tutorial

Summary

In this tutorial, we discussed how to use react-vis library’s modules like XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, VerticalBarSeries, VerticalBarSeriesCanvas, and DiscreteColorLegend to draw a bar chart in react application within a react’s class component.