Skip to main content

Bar Chart - Material Design

High-Level Overview​

To render a Material 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​

Material Chart​

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

const data = [
  ["Year", "Sales", "Expenses"],
  ["2014", 1000, 400],
  ["2015", 1170, 460],
  ["2016", 660, 1120],
  ["2017", 1030, 540],
];

// Material chart options
const options = {
  chart: {
    title: "Company Performance",
    subtitle: "Sales and Expenses over the Years",
  },
};

function App() {
  return (
    <Chart
      // Note the usage of Bar and not BarChart for the material version
      chartType="Bar"
      data={data}
      options={options}
    />
  );
}

export default App;

Examples​

Below are interactive examples of material design Bar Charts rendered using react-google-charts.

Each example demonstrates different features and customization options. You can interact with the charts and the code directly in your browser.

Material Design Bar Chart​

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

Material Design Horizontal Bar Chart​

This example shows a horizontal Material Design Bar Chart.

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 = {
  chart: {
    title: "Company Performance",
    subtitle: "Sales and Expenses over the Years",
  },
  bars: "vertical", // Required for Material Bar Charts.
  colors: ["#1b9e77", "#d95f02", "#7570b3"],
  bar: { groupWidth: "75%" },
  legend: { position: "bottom" },
};

Horizontal Bar Chart​

To create a horizontal bar chart, set the bars option to "horizontal":

const options = {
  chart: {
    title: "Company Performance",
    subtitle: "Sales and Expenses over the Years",
  },
  bars: "horizontal",
};

Stacked Bar Chart​

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

const options = {
  stacked: true,
  chart: {
    title: "Company Performance",
    subtitle: "Sales and Expenses over the Years",
  },
};

Additional Resources​