Skip to main content

Area Chart

High-Level Overview​

To render an Area Chart, you need to provide the following props to the Chart component:

  • chartType: Set this to "AreaChart" to specify the chart type.
  • data: Provide the chart data in a tabular format.
  • options: (Optional) Customize the chart with various options like title, colors, and display settings.
  • width and height: (Optional) Define the size of the chart.

Basic Usage​

import React from "react";
import { Chart } from "react-google-charts";

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: "70%", height: "70%" },
};

function App() {
  return <Chart chartType="AreaChart" data={data} options={options} />;
}

export default App;

Examples​

Below are interactive examples of Area Charts rendered using react-google-charts. Each example demonstrates different features and customization options. You can interact with the charts directly in your browser.

Simple Example​

This is a basic Area Chart illustrating simple data visualization.

Stacking Areas​

This example demonstrates how to create a stacked area chart to show the cumulative value over time.

100% Stacked Areas​

This example shows how to create a 100% stacked area chart, where the cumulative proportion of each category is shown.

Customizing the Area Chart​

You can customize various aspects of the Area Chart using the options prop.

Styling Options​

Customize the chart's appearance:

const options = {
  title: "Company Performance",
  hAxis: { title: "Year", titleTextStyle: { color: "#333" } },
  vAxis: { minValue: 0 },
  // To make a stacked area chart.
  isStacked: true,
  colors: ["#a52714", "#097138"],
  areaOpacity: 0.8,
  legend: { position: "bottom" },
};

100% Stacked Area Chart​

To create a 100% stacked area chart, set the isStacked option to 'relative':

const options = {
  title: "Company Performance",
  hAxis: { title: "Year", titleTextStyle: { color: "#333" } },
  vAxis: { minValue: 0 },
  isStacked: "relative",
  legend: { position: "bottom" },
};

Area Opacity​

Adjust the transparency of the area using the areaOpacity option:

const options = {
  areaOpacity: 0.4, // Value between 0.0 (transparent) and 1.0 (opaque)
};

Additional Resources​

Happy Charting!