Line chart

A line chart shows data as line-connected dots. Line charts can display either multiple measures as individual lines or a single measure split by one attribute into multiple lines with points intersecting attribute values. Use it to show how a measure changes over time or across a series of stages, for example, the monthly sales of a product.

Buckets

Sorting

LineChart applies no default sorting. To sort the data, pass sort items in the sortBy prop. See Sort items.

Configuration

Pass these options in the config prop. See Chart configuration for details.

Forecast and anomalies

LineChart can ask GoodData to forecast the next values of a measure and to find anomalies in it. Both work on a chart with one line: one measure, one date attribute in trendBy, and no segmentBy.

The anomalies option in config styles those points: color (red by default) and size ("small", "medium", or "big").

<LineChart
    measures={[Md.$FranchiseFees]}
    trendBy={Md.DateMonth.Short}
    forecastConfig={{ forecastPeriod: 3, confidenceLevel: 0.95, seasonal: false }}
    outliersConfig={{ sensitivity: "medium" }}
/>

GoodData Cloud calls these smart functions; see Use Smart Functions.

Limits

• A line chart renders up to 10,000 lines and up to 10,000 trendBy values. With more, the chart shows an error and onError receives a DataTooLargeToDisplaySdkError. Filter the data to fit.

Structure

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { LineChart } from "@gooddata/sdk-ui-charts";

<LineChart
    measures={<measures>}
    config={<chart-config>}
    …
/>

Example

import "@gooddata/sdk-ui-charts/styles/css/main.css";
import { LineChart } from "@gooddata/sdk-ui-charts";
import * as Md from "./catalog.js";

const style = { height: 300 };

<div style={style}>
    <LineChart
        measures={[Md.$FranchiseFees]}
        trendBy={Md.DateMonth.Short}
    />
</div>

Props