How to Create Charts in ReactJS?

Chart is a graphical representation of data. Charts allows us to analyze, understand and predict the data based on values and outcomes on the chart. In this tutorial we will learn how to create charts in ReactJS.

We can create different types of Charts in ReactJS:

PieChart
TreeMap
SankeyDiagram
XY charts
AreaBarChart
AreaChart
AreaHeatmap
BarChart
ColorHeatmap
FunnelChart
Histogram
LineChart
MarkerLineChart
RangeBarChart
ScatterPlot

Here we will use the ReactoChart

ReactoChart is a library of React components for creating charts and graphs in ReactJS. We can use these Components to create line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map. Here is an original author of ReactoChart and this docs website. You can read in detail here about the ReactoChart.

Quick Start

First Install ReactoChart using npm

npm install --save reactochart

Import the Chart Components

import XYPlot from 'reactochart/XYPlot';
import XAxis from 'reactochart/XAxis';
import YAxis from 'reactochart/YAxis';
import LineChart from 'reactochart/LineChart';

If you prefer, you can import all of Reactochart at once, though this may hinder some optimizations, such as webpack tree-shaking:

import {XYPlot, XAxis, YAxis, LineChart} from 'reactochart';
// or 
import * as Reactochart from 'reactochart';

Create Line Chart in ReactJS

import XYPlot from 'reactochart/XYPlot';
import XAxis from 'reactochart/XAxis';
import YAxis from 'reactochart/YAxis';
import LineChart from 'reactochart/LineChart';
import 'reactochart/styles.css';

const MyFirstLineChart = (props) => (
  <XYPlot>
    <XAxis title="Phase" />
    <YAxis title="Intensity" />
    <LineChart
      data={Array(100)
        .fill()
        .map((e, i) => i + 1)}
      x={d => d}
      y={d => Math.sin(d * 0.1)}
    />
  </XYPlot>
);

Similarly We can create different types of Charts or Graphs in ReactJS using ReactoChart. Different Types of ReactJS Charts Examples are given on their website, click here.

Recommendation

How to validate form in ReactJS

For more ReactJS Tutorials Click here.

If you like this, share this.