DEV Community

Cover image for How to Create Charts in ReactJS
Chetan Rohilla
Chetan Rohilla

Posted on • Updated on • Originally published at w3courses.org

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.

Quick Start

First Install ReactoChart using npm

npm install --save reactochart
Enter fullscreen mode Exit fullscreen mode

Import the Chart Components

import XYPlot from 'reactochart/XYPlot';
import XAxis from 'reactochart/XAxis';
import YAxis from 'reactochart/YAxis';
import LineChart from 'reactochart/LineChart';
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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.


Please like share and give positive feedback to motivate me to write more.

For more tutorials visit my website.

Thanks:)
Happy Coding:)

Top comments (0)