Skip to main content

Bar Chart

You might also be interested in Column Charts and Histograms.

High-Level Overview​

To render a Bar Chart, you need to provide the following props to the Chart component:

  • chartType: Set this to "Bar" for Material Design bar charts or "BarChart" for classic bar charts.
  • 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";

export const data = [
  ["City", "2010 Population", "2000 Population"],
  ["New York City, NY", 8175000, 8008000],
  ["Los Angeles, CA", 3792000, 3694000],
  ["Chicago, IL", 2695000, 2896000],
  ["Houston, TX", 2099000, 1953000],
  ["Philadelphia, PA", 1526000, 1517000],
];

// Different options for non-material charts
export const options = {
  title: "Population of Largest U.S. Cities",
  chartArea: { width: "50%" },
  hAxis: {
    title: "Total Population",
    minValue: 0,
  },
  vAxis: {
    title: "City",
  },
};

export function App() {
  return (
    <Chart
      // Bar is the equivalent chart type for the material design version.
      chartType="BarChart"
      width="100%"
      height="400px"
      data={data}
      options={options}
    />
  );
}

Examples​

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

Material Design Bar Chart​

This example demonstrates a Material Design Bar Chart with default settings.

Basic Bar Chart with Multiple Series​

This example uses the classic Bar Chart to display multiple data series.

Customizable Bar Colors​

Learn how to customize the colors of the bars in your chart.

Diff Bar Chart​

This example demonstrates how to create a Diff Bar Chart to compare two sets of data.

Labeling Bars​

Learn how to add labels to your bars for better data representation.

Stacked Bar Chart with Multiple Series​

This example shows how to create a stacked bar chart to display multiple data series cumulatively.

Customizing the Bar Chart​

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

Styling Options​

Customize the chart's appearance:

const options = {
  title: "Company Performance",
  hAxis: {
    title: "Year",
  },
  vAxis: {
    title: "Sales",
  },
  colors: ["#1b9e77", "#d95f02", "#7570b3"],
  bar: { groupWidth: "75%" },
  legend: { position: "bottom" },
};

Horizontal Bar Chart​

To create a horizontal bar chart, adjust the axes:

const options = {
  title: "Company Performance",
  hAxis: {
    title: "Sales",
  },
  vAxis: {
    title: "Year",
  },
  bar: { groupWidth: "75%" },
  legend: { position: "bottom" },
};

Stacked Bar Chart​

To stack the bars, set the isStacked option to true:

const options = {
  isStacked: true,
  title: "Company Performance",
  hAxis: {
    title: "Year",
  },
  vAxis: {
    title: "Sales",
  },
};

Additional Resources​