ZoomCharts Documentation


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.


advanced: anonymous type

Advanced settings relevant to info popup appearance.

contentsFunction: (data: Array<LinearChartSeriesStackData>, series: LinearChartSettingsSeries, range: [number, number]) => string
Default value: null
Version 1.16.0: added support for `data.

Create custom info contents to display in info popup.

See also

Data for the info popup

The configuration of the series object currently under the cursor

range: [number, number]

The range for which the info popup is being built.

Return value
Data type: string

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.

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.


  • 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
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.

Info popup style.

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

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

series object for the value

Return value
Data type: string

HTML text to place as the value.