React Analytics Charts
Edit page
Home
Core Components
Charts Overview
Common Charts
Custom Charts
BarChartColumnChartGeoChartLineChartDescriptionUsagePropsPieChartTableChart
Custom Dashboards and Standalone ChartsHow To Get An OAuth Client ID From GoogleCode of ConductMIT License

LineChart

Description

A line chart shows data as points connected by lines. Similar visual presentation to a column 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, line chart options for the chart.

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

Usage

import { AnalyticsDashboard, LineChart } from "react-analytics-charts";
<AnalyticsDashboard
authOptions={{ clientId }}
renderCharts={(gapi, viewId) => {
return (
<LineChart
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

PropTypeDescription
gapiGoogleAnalyticsEmbedAPIRequired. The ready and authorized Google Analytics Embed API
containerstringRequired. Provide an ID for the div that will contain the chart.
queryQueryRequired. The Query for the Analytics data. See the Query Prop section of DataChart.
optionsLineChartOptionsOptional. Options for the chart. To determine what to use here, refer to the Configuration Options section for line 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 line charts, allowing you to customize the appearance. Provide these via the options prop.

Below are a few of the notable ones:

OptionTypeDescription
titlestringText to display above the chart.
widthnumber | stringWidth of the chart, in pixels. Also supports a percentage string. Default: 100%
heightnumber | stringHeight of the chart, in pixels.
lineWidthnumberData line width in pixels. Use zero to hide all lines and show only the points. You can override values for individual series using the series property. Default: 2
pointShapestringThe shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star', or 'polygon'. See the points documentation for examples. Default: 'circle'
pointSizestringDiameter of displayed points in pixels.
pointsVisiblebooleanDetermines whether points will be displayed. Set to false to hide all points. Default: true

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

See all chart options.