ColumnChart

Description

A column chart shows data as vertical bars. Similar visual presentation to a line chart.

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

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

Usage

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

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    return (
      <ColumnChart
        gapi={gapi}
        query={{
          ids: viewId,
          "start-date": "14daysAgo",
          "end-date": "today",
          metrics: "ga:sessions",
          dimensions: "ga:date",
        }}
        container="sessions-by-date-chart"
        options={{
          title: `Sessions (14 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	`ColumnChartOptions`	Optional. Options for the chart. To determine what to use here, refer to the Configuration Options section for column 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 column 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.