BarChart

Description

A bar chart shows data as horizontal bars.

You can use this to create a custom chart by providing your own data query (see DataChart for more info on queries) and, optionally, bar chart options for the chart.

Refer to the Charts Overview for a list of all charts available.

Usage

import { AnalyticsDashboard, BarChart } from "react-analytics-charts";

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    return (
      <BarChart
        gapi={gapi}
        query={{
          ids: viewId,
          "start-date": "30daysAgo",
          "end-date": "today",
          metrics: "ga:sessions,ga:users,ga:pageviews",
          dimensions: "ga:deviceCategory",
        }}
        container="traffic-by-device-category-chart"
        options={{
          title: "Traffic By Device Category (30 Days)",
        }}
      />
    );
  }}
/>

Props

Prop	Type	Description
gapi	`GoogleAnalyticsEmbedAPI`	Required. The ready and authorized Google Analytics Embed API
container	`string`	Required. Provide an ID for the `div` that will contain the chart.
query	`Query`	Required. The `Query` for the Analytics data. See the Query Prop section of DataChart.
options	`BarChartOptions`	Optional. Options for the chart. To determine what to use here, refer to the Configuration Options section for bar charts.

This component also supports all div props, such as className, style, and onClick.

If you have more than one of this chart on the page, be sure to specify a unique container ID.

Query

Refer to DataChart Query Prop to build your own data query.

Chart Options

There are numerous chart options available for bar charts, allowing you to customize the appearance. Provide these via the options prop.

Below are a few of the notable ones:

Option	Type	Description
title	`string`	Text to display above the chart.
width	`number` \| `string`	Width of the chart, in pixels. Also supports a percentage string. Default: `100%`
height	`number` \| `string`	Height of the chart, in pixels.

The containing element is rendered as a div and you can size and style it as you see fit using CSS.