How To Add AreaChart In ReactJS

In this article, we will learn how to add an Area Chart using google charts.

The series are drawn in the area chart by default stacked on top of one another. Instead, you can stack them on top of one another to add the data values at each x-value. Each series’ value in an area chart will always be stacked in relation to the value of the series before it.

–First of all, we have to create a react application.

-Then import the below package into your project.

npm install --save react-google-charts

-Now open your app.js file and add the below code:

import React from 'react';
import './style.css';
import { Chart } from 'react-google-charts';

export default function App() {
  const data = [
    ["Year", "Sales", "Expenses"],
    ["2013", 1000, 400],
    ["2014", 1170, 460],
    ["2015", 660, 1120],
    ["2016", 1030, 540],
  ];
  
  const options = {
    title: "Company Performance",
    hAxis: { title: "Year", titleTextStyle: { color: "#333" } },
    vAxis: { minValue: 0 },
    chartArea: { width: "50%", height: "70%" },
  };
  
  return (
    <Chart
    chartType="AreaChart"
    width="100%"
    height="400px"
    data={data}
    options={options}
  />
  );
}

output: