---
title: How to Create Charts in ReactJS? – Jaeves Codelab
description: 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 thi
---

[Start Coding with Codelab | Jaeves AI](https://jaeves.com/codelab)

# [How to Create Charts in ReactJS? – Jaeves Codelab](https://jaeves.com/codelab/how-to-create-charts-in-reactjs)

 Written by [Admin](https://jaeves.com/codelab/author/admin) | Oct 2, 2023, 9:44:04 PM

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](https://github.com/spotify/reactochart) and this [docs website](https://spotify.github.io/reactochart/docs/build/#/quick-start). You can read in [detail here about the ReactoChart](https://github.com/spotify/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, [to know more click here](https://spotify.github.io/reactochart/docs/build/#/xy-plots).

##### Recommendation

[How to validate form in ReactJS](https://jaeves.com/codelab/how-to-validate-form-in-reactjs/)

For more [ReactJS Tutorials Click here](https://jaeves.com/codelab/tag/reactjs/).

[View full post](https://jaeves.com/codelab/how-to-create-charts-in-reactjs)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Admin"
  },
  "dateModified" : "2023-10-12T19:50:18.068Z",
  "datePublished" : "2023-10-02T21:44:04Z",
  "headline" : "How to Create Charts in ReactJS?",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://jaeves.com/codelab/how-to-create-charts-in-reactjs",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60.0,
      "url" : "https://139767802.fs1.hubspotusercontent-eu1.net/hubfs/139767802/logos/jaeves-logo-230907.png",
      "width" : 185.625
    },
    "name" : "Codelab"
  }
}
```