Headline

A headline shows a single number or compares two numbers.

Headlines have two sections: Measure (primary) and Measure (secondary). You can add one item to each section. If you add two items, the headline also displays the change in percent.

Headline

Structure

import { Headline } from "@gooddata/sdk-ui-charts";

<Headline
    primaryMeasure={<measure>}
/>

Example

Headline with a single measure (primary measure)

import { Headline } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

<Headline
    primaryMeasure={Md.$FranchiseFees}
/>

Headline with two measures (primary and secondary measures)

import { Headline } from "@gooddata/sdk-ui-charts";
import * as Md from "./md/full";

<Headline
    primaryMeasure={Md.$FranchiseFees}
    secondaryMeasure={Md.$FranchiseFeesAdRoyalty}
/>

Properties

NameRequired?TypeDescription
primaryMeasuretrueIMeasureThe definition of the primary measure
secondaryMeasurefalseIMeasureThe definition of the secondary measure
filtersfalseIFilter[]An array of filter definitions
backendfalseIAnalyticalBackendThe object with the configuration related to communication with the backend and access to analytical workspaces
workspacefalsestringThe workspace ID
localefalsestringThe localization of the chart. Defaults to en-US.
drillableItemsfalseIDrillableItem[]An array of points and attribute values to be drillable
ErrorComponentfalseComponentA component to be rendered if this component is in error state
LoadingComponentfalseComponentA component to be rendered if this component is in loading state
onErrorfalseFunctionA callback when the component updates its error state
onExportReadyfalseFunctionA callback when the component is ready for exporting its data
onLoadingChangedfalseFunctionA callback when the component updates its loading state
onDrillfalseFunctionA callback when a drill is triggered on the component