ZoomCharts Documentation
Version: 1.21.1 (2024-11-08)

FacetChart.settings.info

This section is defined by the type LinearChartSettingsInfoPopup.

Info popup when hovering over columns or lines. Content returned in a form of html and is relevant to context of series hovered.

Properties

advanced: anonymous type

Advanced settings relevant to info popup appearance.

Properties
contentsFunction: (data: Array<LinearChartSeriesStackData>, series: LinearChartSettingsSeries, range: [number, number], apis: { computeSeriesColor: (group: LinearChartSeriesStackData, series: LinearChartSeriesStackDataItem, seriesIndex: number, value: number) => string; computeTextShadow: (group: LinearChartSeriesStackData, series: LinearChartSeriesStackDataItem, seriesIndex: number, color: string) => string; }) => string | HTMLElement
Default value: null
Version 1.16.0: added support for `data.

Create custom info contents to display in info popup.

See also
Parameters
data: Array<LinearChartSeriesStackData>

Data for the info popup

series: LinearChartSettingsSeries

The configuration of the series object currently under the cursor

range: [number, number]

The range for which the info popup is being built.

apis: anonymous type
Properties
computeSeriesColor: (group: LinearChartSeriesStackData, series: LinearChartSeriesStackDataItem, seriesIndex: number, value: number) => string

Calculate the series color that would normally be used

Parameters
seriesIndex: number
value: number
Return value
Data type: string
computeTextShadow: (group: LinearChartSeriesStackData, series: LinearChartSeriesStackDataItem, seriesIndex: number, color: string) => string

Calculate the text shadow that would normally be used

Parameters
seriesIndex: number
color: string
Return value
Data type: string
Return value
Data type: string | string | HTMLElement

HTML code that will be displayed in the info popup instead of the default.

scope: "stack" | "value" | "auto"
Default value: null

Controls how the selection for the info popup is created and what data is displayed.

Valid values:
  • stack - all stacks for the minimum time period (for example, multiple columns for the same day) are selected when hovering.
  • value - only a single stack (for example, a column) is selected when hovering.
  • auto - acts as stack when hovering over the empty area but value if the bar/line is directly under the pointer.
showHeader: boolean
Default value: true

Specifies if the default header should be included. If set to false, the contentsFunction should be used to return the header as well.

showOnlyHoveredSeries: boolean
Default value: false

Whether to show only the series under cursor in info popup. If scope is set to value then the info popup will be empty unless the pointer hovers over the value bar/line.

sortFunction: (a: LinearChartSettingsSeries, b: LinearChartSettingsSeries, indexA: number, indexB: number) => number
Default value: null

Function to determine what order the series are displayed in. indexA and indexB give the order the series were originally specified in.

Parameters
indexA: number
indexB: number
Return value
Data type: number
aggregations: Array<string>
Default value: null

List of aggregations that will be shown in the info popup for each series. If none are specified, info popup displays the aggregation that is specified in the series data configuration. Available aggregations: sum (default), count, first, last, min, max, avg, change

Valid values:
  • sum - Default aggregation.The sum of data values
  • count - The count of data values
  • first - The first one of data values
  • last - The last one of data values
  • min - The min of data values
  • max - The max of data values
  • avg - The average of data values
  • change - The difference between first and last
container: string | HTMLElement
Default value: null

Custom containing div for the info popup

enabled: boolean
Default value: true

Show/hide info popup

position: "outside" | "inside"
Default value: "inside"
Introduced in version 1.11.0.

Specifies the position of the info popup.

Values:

  • inside - Displays the info popup inside the chart area right below the toolbars. This is the default behavior which is well suited for larger charts.
  • outside - Displays the info popup above the chart area. This mode is intended for very small charts where the info popup would overlap the whole chart.
See also
showAtDataPoint: boolean
Default value: false

Whether to show the info popup at the data point itself

showNoData: boolean
Default value: true

Whether to show series with no data in hovered time period.

showNullData: boolean
Default value: true

Whether to show series with null data in the hovered time period.

showZeroData: boolean
Default value: true

Whether to show series with data equal to zero in hovered time period.

style: anonymous type

Info popup style.

Properties
highlight: LinearChartSettingsHighlightStyle
View section details

Style used to highlight the values that are shown in the info popup.

useStackedValue: boolean
Default value: false

Specifies if the value label render the stacked value (the sum of all values below it) or just the individual value of the particular series.

Default value null means that the stacked value is used unless the stack type is set to based.

valueFormatterFunction: (values: LinearChartSeriesStackDataItemValues, series: LinearChartSettingsSeries) => string
Default value: null

Prepare custom format values to display in info popup.

See also
Parameters
values: LinearChartSeriesStackDataItemValues

object containing {sum, min, max, first, last, count, avg, change}

series: LinearChartSettingsSeries

series object for the value

Return value
Data type: string

HTML text to place as the value.

X