How to Create Charts in ReactJS?

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.

Follow us on FacebookTwitterTumblrLinkedInYouTube.

Comments are closed.