DataChart

Description

A DataChart is the base chart component used for all analytics charts.

You can use this to create a custom chart by providing your own data query (see Query Prop below), the container and type of chart (see Chart Prop below), and options for the chart depending on the type of chart you've chosen.

For convenience you can use the BarChart, ColumnChart, GeoChart, LineChart, PieChart, and TableChart components, which wrap DataChart and handle configuring the chart prop of a DataChart for you. (Those components also include TypeScript types for each set of options.)

There are also a number of ready-made charts available for you to use with preconfigured queries and chart options. Refer to the Charts Overview for a list of all charts that wrap DataChart.

This component wraps the useDataChart hook, which uses the Google Analytics Embed API to query the analytics data and render the chart into a container on the page.

Usage

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

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    return (
      <DataChart
        gapi={gapi}
        query={{
          ids: viewId,
          "start-date": "28daysAgo",
          "end-date": "today",
          metrics: "ga:sessions",
          dimensions: "ga:browser",
        }}
        chart={{
          container: "data-chart-container",
          type: "BAR",
          options: {
            title: "Sessions By Browser (28 Days)",
          },
        }}
      />
    );
  }}
/>

Props

Prop	Type	Description
gapi	`GoogleAnalyticsEmbedAPI`	Required. The ready and authorized Google Analytics Embed API
query	`Query`	Required. The `Query` for the Analytics data. See below.
chart	`Chart`	Required. Specifies the `Chart` to be rendered. See below.

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

Query Prop

The query prop specifies the analytics data to retrieve. The following properties are all required except for dimensions (although many queries require at least one dimension to work).

There are many additional properties not listed here. See Google's Query spec for a full list of Query properties.

Refer to the Dimensions & Metrics Explorer for possible metrics and dimensions.

Property	Type	Description
ids	`string`	Required. The unique view ID used to retrieve the Analytics data. This ID is the concatenation of the namespace ga: with the Analytics view (profile) ID. See official `ids` docs for more info.
start-date	`string`	Required. All Analytics data requests must specify a date range. If you do not include `start-date` and `end-date` parameters in the request, the server returns an error. Date values can be for a specific date by using the pattern `YYYY-MM-DD` or relative by using `today`, `yesterday`, or the `NdaysAgo` pattern. See official `start-date` docs for more info.
end-date	`string`	Required. All Analytics data requests must specify a date range. If you do not include `start-date` and `end-date` parameters in the request, the server returns an error. Date values can be for a specific date by using the pattern `YYYY-MM-DD` or relative by using `today`, `yesterday`, or the `NdaysAgo` pattern. See official `end-date` docs for more info.
metrics	`string`	Required. One or more comma separated metrics for the query. See the Dimensions & Metrics Explorer for possible metrics. See official `metrics` docs for more info.
dimensions	`string`	Optional. One or more comma separated dimensions for the query. See the Dimensions & Metrics Explorer for possible dimensions. See official `dimensions` docs for more info.

Example Query Prop

{
  ids: viewId,
  'start-date': `14daysAgo`,
  'end-date': 'yesterday',
  metrics: 'ga:sessions,ga:pageviews,ga:users',
  dimensions: 'ga:date',
}

Chart Prop

The chart prop is an object that specifies the container ID, chart type, and chart options that the Google Analytics Embed API will use to generate the chart.

The API will render your chart into the container with the ID provided. See the official Chart specs by Google for more information.

Property	Type	Description
container	`string`	Required. Provide a unique ID for the `div` that will contain the chart.
type	`"LINE"` \| `"COLUMN"` \| `"BAR"` \| `"PIE"` \| `"TABLE"` \| `"GEO"`	Required. The chart type, as a string. See the Charts Overview. Choose from line chart, column chart, bar chart, pie chart, table, or geo chart. Refer to the chart gallery to decide which chart you'd like.
options	`LineChartOptions` \| `ColumnChartOptions` \| `BarChartOptions` \| `PieChartOptions` \| `TableChartOptions` \| `GeoChartOptions`	Optional. The options for the chart, if any. To determine what to use here, refer to the Configuration Options section for line charts, column charts, bar charts, pie charts, tables, or geo charts, for the chart `type` you've chosen.

Example Chart Prop

{
  container: 'sessions-data-chart-container',
  type: 'LINE',
  options: {
    title: 'Sessions (28 Days)',
  },
}

For convenience you can use the BarChart, ColumnChart, GeoChart, LineChart, PieChart, and TableChart components, which handle configuring the chart prop of a DataChart for you. Refer to the Charts Overview for all charts that wrap DataChart.

Styling

The data chart is rendered as a div with the class name gapi-data-chart-container. Inspect the DOM to see what Google renders there.

The following will style all charts used by this library:

.gapi-data-chart-container {
  /* Custom styles */
}