Interface KpiStyleOptions Beta

Configuration options that define functional style of the various elements of a KPI chart.

Example

<KpiChart
  dataSet={DM.DataSource}
  dataOptions={{
    value: measureFactory.sum(DM.Commerce.Revenue),
    trend: DM.Commerce.Date.Months,
  }}
  styleOptions={{
    title: { text: 'Monthly Revenue' },
    sparkline: { chartType: 'line' },
    card: { textAlign: 'center', cornerRadius: 12 },
  }}
/>

Properties

card

card?: KpiCardStyleOptions

Card container styling.

comparison

comparison?: KpiComparisonStyleOptions

Comparison readout styling (polarity, icon, colors).

height

height?: number

Total height of the component, which is considered in the following order of priority:

1. Value passed to this property (in pixels).
2. Height of the container wrapping this component
3. Default value of 400px (for component without header) or 425px (for component with header).

layout

layout?: "big-comparison" | "standard"

Card layout mode.

Default Value

'standard'

sparkline

sparkline?: KpiSparklineStyleOptions

Sparkline styling; rendered only when KpiChartDataOptions.trend is set.

title

title?: KpiTitleStyleOptions

Card title styling (defaults to the value measure title).

value

value?: KpiValueStyleOptions

Headline value styling.

width

width?: number

Total width of the component, which is considered in the following order of priority:

1. Value passed to this property (in pixels)
2. Width of the container wrapping this component
3. Default value of 400px