ActiveUsersChart

Description

This LineChart charts the number of users who visited within the last 1, 7, 14, 28, or 30 days, for each date, until today.

Useful for visualizing your userbase growth over time.

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

Usage

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

<AnalyticsDashboard
  authOptions={{ clientId }}
  renderCharts={(gapi, viewId) => {
    return (
      <ActiveUsersChart
        gapi={gapi}
        viewId={viewId}
        days={28}
        activeUserDays={7}
      />
    );
  }}
/>

Props

Prop	Type	Description
gapi	`GoogleAnalyticsEmbedAPI`	Required. The ready and authorized Google Analytics Embed API
viewId	`string`	Required. View ID for the view the chart pertains to. See ViewSelector for more information.
days	`number` \| `undefined`	Optional. Number of days the chart shows data for. Defaults to `28`.
container	`string` \| `undefined`	Optional. HTML element ID for the container to which the Google Analytics Embed API renders. One will be created if no value is provided.
activeUserDays	`1` \| `7` \| `14` \| `28` \| `30` \| `undefined`	Optional. Number of users who visited within the last `1`, `7`, `14`, `28`, or `30` days. Defaults to `7`.
options	LineChartOptions	Optional. The options for this chart have been preconfigured, but you can add or override any LineChartOptions you'd like here, such as the `width` or `title`.
query	`Query`	Optional. The query for this chart has been preconfigured, but you can override any query properties you'd like here.

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.

Data Queried

This query's date range spans from a start-date of NdaysAgo, where N is the days prop provided, until an end-date of today. See DataChart for more information on queries.

Metrics

Use the activeUserDays prop to choose one of the following metrics:

ga:1dayUsers
ga:7dayUsers
ga:14dayUsers
ga:28dayUsers
ga:30dayUsers

Dimensions

ga:date

Customizing

This chart has been preconfigured for ease of use, but you can customize it by providing a query or options prop.

The properties you specify in either prop object will override the ones used by this chart.

This means you can cherry-pick the properties you'd like to override, such as the metrics in the query, or the width in options, without having to create a completely custom chart.