There are four ways of enabling the tooltips in AG Charts by using:
The default chart tooltip has the following template:
<div class="ag-chart-tooltip">
<div class="ag-chart-tooltip-title"></div>
<div class="ag-chart-tooltip-content"></div>
</div>
The title element may or may not exist but the content element is always present. In the screenshots below the content element of both tooltips contains Jun: 50.00:
To make the tooltip title visible you need to specify the series' yName, or labelName in the case of 'pie' series. These configs supply the keys used to fetch the display names, because the keys themselves may not be presentable or descriptive.
In the sample data below the value1 key is not descriptive, while hats_made is not very presentable:
data: [
{
month: "Jun",
value1: 50,
hats_made: 40,
},
]
Notice that when we set the yName of the 'column' series:
- The tooltip title is visible when
yName config is set, and hidden when the yName is reset.
- The
yName changes are reflected in the legend as well.
- The legend will use the
yKey when the yName is not set. The tooltip however will only have a title if the yName (or title) is set.
Also note that for numeric values the tooltips show two digits after the decimal point by default.
The tooltip position can be modified using the tooltip.position.type property.
tooltip.position.type can be one of the following:
node - Anchors the tooltip to the highlighted nodepointer - Anchors the tooltip to the mouse pointer
For series with markers, such as line, area, scatter and bubble, where each data point is represented by a marker, the default tooltip position.type is node. This means that the tooltip will be positioned above the highlighted marker node.
For series without markers, such as bar,column, histogram, treemap, pie and doughnut, where each data point is represented by a fixed shape, for example a rectangle or a pie sector, the default tooltip position.type is pointer. This means that the tooltip will follow the mouse pointer as it moves over the shapes.
The xOffset and yOffset properties in tooltip.position options define the distance in pixels from the tooltip to the anchor point:
tooltip: {
position: {
type: 'pointer',
xOffset: 80,
yOffset: 80,
}
}
In this example we show how to change the tooltip's default position. Note that:
- Instead of the tooltip being anchored to the highlighted marker node, it is anchored 80 pixels to the left and below the mouse pointer.
- By default, when
tooltip.position.xOffset or tooltip.position.yOffset are configured, the tooltip arrow is removed.
The default tooltip already uses ag-chart-tooltip, ag-chart-tooltip-title and ag-chart-tooltip-content CSS classes, but these classes are not meant to be used directly to add custom CSS rules to, unless you want to change the styling of all the tooltips in your app. Instead, users of the charting library should provide their own tooltip class name via the chart.tooltip.class config. This class name will be added to the class list of the tooltip element for only that particular chart instance.
For example, if we wanted to set the tooltip's content background-color to gold, we'd add a custom class name to our chart in the code:
chart.tooltip.class = "my-tooltip"
.my-tooltip .ag-chart-tooltip-content {
background-color: gold;
}
This limits the styling changes to this chart instance alone (or instances that use the same tooltip class). We could style the title element and the container element in the same manner.
Note that your styles don't override the default tooltip styles but complement them.
In this example we show how to change the content's background color and the color of the tooltip's arrow to gold.
Modifying Content / Title
To control what goes into the title and content divs of the tooltip one can set up a tooltip renderer function (one per series) that receives values associated with the highlighted data point and returns an object with the title and content fields containing plain text or inner HTML that goes into the corresponding divs:
tooltip: {
renderer?: (params: AgSeriesTooltipRendererParams) => AgTooltipRendererResult;
}
interface AgTooltipRendererResult {
title?: string;
content?: string;
}
The actual type of the params object passed into the tooltip renderer will depend on the series type being used. See the tooltips API Reference renderer function examples.
Let's say we wanted to remove the digits after the decimal point from the values shown in tooltips.
We could use the following tooltip renderer to achieve that:
tooltip: {
renderer: function (params) {
return {
content: params.yValue.toFixed(0),
title: params.xValue
};
}
}
The example below demonstrates the above tooltip renderer in action:
Instead of having the tooltip renderer return an object with title and content strings to be used in the default tooltip template, you can return a string with completely custom markup that will override not just the title and content but the template as well.
Let's say we wanted to remove the digits after the decimal point from the values shown in tooltips (by default the tooltips show two digits after the decimal point for numeric values). We could use the following tooltip renderer to achieve that:
series: [
{
type: "column",
tooltip: {
renderer: function (params) {
return `
<div class="ag-chart-tooltip-title" style="background-color:${params.color}">
${params.xValue}
</div>
<div class="ag-chart-tooltip-content">${params.yValue} </div>`
},
},
},
]
The tooltip renderer function receives the params object as a single parameter. Inside that object you get the xValue and yValue for the highlighted data point as well as the reference to the raw datum element from the chart.data or series.data array. You can then process the raw values however you like before using them as a part of the returned HTML string.
Different series types get different tooltip renderer parameters. You can find out which parameters are supported by which series using the API reference below.
The effect of applying the tooltip renderer from the snippet above can be seen in the example below.
Notice that the tooltip renderer in the example below:
- Returns two
div elements, one for the tooltip's title and another for its content.
- The value of the title comes from
params.xValue which is the name of the month.
- The title element gets its background color from the
params object. The provided color matches the color of the series.
- The
'Sweaters Made' value comes from the params.yValue, which we then stringify as an integer via toFixed(0).
- We use the default class names on the returned
div elements, so that our tooltip gets the default styling. You could however add your own classes to the class list, or replace the default CSS classes with your own. The structure of the returned DOM is also up to you, we are just following the convention for this example.
By default, the tooltip of the nearest node is visible when the cursor is on the chart. However, this behaviour can be changed with the chart.tooltip.range property.
The example below shows the three types of interaction range:
'nearest' (default) will show the tooltip of the nearest node anywhere on the chart'exact' will show the tooltip if the user hovers over a node- given a number the tooltip will show if the cursor is within that distance in pixels of a node
By default, you can not hover over a tooltip or select its text. Set the series[].tooltip.interaction.enabled flag to true to enable selecting the text and clicking links within the tooltip.
API Reference
Properties available on the AgSeriesTooltip interface.
| boolean | Whether or not to show tooltips when the series are hovered over. |
| AgTooltipPositionOptions | The position of the tooltip. By default the tooltip follows the mouse pointer. position: AgTooltipPositionOptions;
type AgTooltipPositionOptions =
AgMovingTooltipPositionOptions
interface AgMovingTooltipPositionOptions {
// The type of positioning for the tooltip. By default, the tooltip follows the pointer.
type: AgTooltipPositionType;
// The horizontal offset in pixels for the position of the tooltip.
xOffset?: PixelSize;
// The vertical offset in pixels for the position of the tooltip.
yOffset?: PixelSize;
}
type AgTooltipPositionType = 'pointer' | 'node'
type PixelSize = number
|
| AgSeriesTooltipInteraction | Configuration for tooltip interaction. interaction: AgSeriesTooltipInteraction;
interface AgSeriesTooltipInteraction {
// Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
enabled: boolean;
}
|
Properties available on the AgBarSeriesTooltip interface.
| Function | Function used to create the content for tooltips. renderer = (
params: AgBarSeriesTooltipRendererParams
) => string | AgTooltipRendererResult;
interface AgBarSeriesTooltipRendererParams {
stackGroup?: string;
// xKey as specified on series options.
xKey: string;
// xValue as read from series data via the xKey property.
xValue?: any;
// xName as specified on series options.
xName?: string;
// yKey as specified on series options.
yKey: string;
// yValue as read from series data via the yKey property.
yValue?: any;
// yName as specified on series options.
yName?: string;
// Datum from the series data array that the tooltip is being rendered for.
datum: any;
// Series title or yName depending on series configuration.
title?: string;
// Series primary colour, as selected from the active theme, series options or formatter.
color?: CssColor;
// The ID of the series.
seriesId: string;
}
type CssColor = string
interface AgTooltipRendererResult {
// Title text for the tooltip header.
title?: string;
// Content text for the tooltip body.
content?: string;
// Tooltip title text color.
color?: string;
// Tooltip title background color.
backgroundColor?: string;
}
|
| boolean | Whether or not to show tooltips when the series are hovered over. |
| AgTooltipPositionOptions | The position of the tooltip. By default the tooltip follows the mouse pointer. position: AgTooltipPositionOptions;
type AgTooltipPositionOptions =
AgMovingTooltipPositionOptions
interface AgMovingTooltipPositionOptions {
// The type of positioning for the tooltip. By default, the tooltip follows the pointer.
type: AgTooltipPositionType;
// The horizontal offset in pixels for the position of the tooltip.
xOffset?: PixelSize;
// The vertical offset in pixels for the position of the tooltip.
yOffset?: PixelSize;
}
type AgTooltipPositionType = 'pointer' | 'node'
type PixelSize = number
|
| AgSeriesTooltipInteraction | Configuration for tooltip interaction. interaction: AgSeriesTooltipInteraction;
interface AgSeriesTooltipInteraction {
// Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
enabled: boolean;
}
|
Properties available on the AgAreaSeriesTooltip interface.
| Function | (params: AgCartesianSeriesTooltipRendererParams) => string | AgTooltipRendererResult renderer = (
params: AgCartesianSeriesTooltipRendererParams
) => string | AgTooltipRendererResult;
interface AgCartesianSeriesTooltipRendererParams {
// xKey as specified on series options.
xKey: string;
// xValue as read from series data via the xKey property.
xValue?: any;
// xName as specified on series options.
xName?: string;
// yKey as specified on series options.
yKey: string;
// yValue as read from series data via the yKey property.
yValue?: any;
// yName as specified on series options.
yName?: string;
// Datum from the series data array that the tooltip is being rendered for.
datum: any;
// Series title or yName depending on series configuration.
title?: string;
// Series primary colour, as selected from the active theme, series options or formatter.
color?: CssColor;
// The ID of the series.
seriesId: string;
}
type CssColor = string
interface AgTooltipRendererResult {
// Title text for the tooltip header.
title?: string;
// Content text for the tooltip body.
content?: string;
// Tooltip title text color.
color?: string;
// Tooltip title background color.
backgroundColor?: string;
}
|
| string | string |
| boolean | Whether or not to show tooltips when the series are hovered over. |
| AgTooltipPositionOptions | The position of the tooltip. By default the tooltip follows the mouse pointer. position: AgTooltipPositionOptions;
type AgTooltipPositionOptions =
AgMovingTooltipPositionOptions
interface AgMovingTooltipPositionOptions {
// The type of positioning for the tooltip. By default, the tooltip follows the pointer.
type: AgTooltipPositionType;
// The horizontal offset in pixels for the position of the tooltip.
xOffset?: PixelSize;
// The vertical offset in pixels for the position of the tooltip.
yOffset?: PixelSize;
}
type AgTooltipPositionType = 'pointer' | 'node'
type PixelSize = number
|
| AgSeriesTooltipInteraction | Configuration for tooltip interaction. interaction: AgSeriesTooltipInteraction;
interface AgSeriesTooltipInteraction {
// Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
enabled: boolean;
}
|
Properties available on the AgLineSeriesTooltip interface.
| Function | Function used to create the content for tooltips. renderer = (
params: AgCartesianSeriesTooltipRendererParams
) => string | AgTooltipRendererResult;
interface AgCartesianSeriesTooltipRendererParams {
// xKey as specified on series options.
xKey: string;
// xValue as read from series data via the xKey property.
xValue?: any;
// xName as specified on series options.
xName?: string;
// yKey as specified on series options.
yKey: string;
// yValue as read from series data via the yKey property.
yValue?: any;
// yName as specified on series options.
yName?: string;
// Datum from the series data array that the tooltip is being rendered for.
datum: any;
// Series title or yName depending on series configuration.
title?: string;
// Series primary colour, as selected from the active theme, series options or formatter.
color?: CssColor;
// The ID of the series.
seriesId: string;
}
type CssColor = string
interface AgTooltipRendererResult {
// Title text for the tooltip header.
title?: string;
// Content text for the tooltip body.
content?: string;
// Tooltip title text color.
color?: string;
// Tooltip title background color.
backgroundColor?: string;
}
|
| string | string |
| boolean | Whether or not to show tooltips when the series are hovered over. |
| AgTooltipPositionOptions | The position of the tooltip. By default the tooltip follows the mouse pointer. position: AgTooltipPositionOptions;
type AgTooltipPositionOptions =
AgMovingTooltipPositionOptions
interface AgMovingTooltipPositionOptions {
// The type of positioning for the tooltip. By default, the tooltip follows the pointer.
type: AgTooltipPositionType;
// The horizontal offset in pixels for the position of the tooltip.
xOffset?: PixelSize;
// The vertical offset in pixels for the position of the tooltip.
yOffset?: PixelSize;
}
type AgTooltipPositionType = 'pointer' | 'node'
type PixelSize = number
|
| AgSeriesTooltipInteraction | Configuration for tooltip interaction. interaction: AgSeriesTooltipInteraction;
interface AgSeriesTooltipInteraction {
// Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
enabled: boolean;
}
|
Properties available on the AgScatterSeriesTooltip interface.
| Function | Function used to create the content for tooltips. renderer = (
params: AgScatterSeriesTooltipRendererParams
) => string | AgTooltipRendererResult;
interface AgScatterSeriesTooltipRendererParams {
// sizeKey as specified on series options.
sizeKey?: string;
// sizeName as specified on series options.
sizeName?: string;
// labelKey as specified on series options.
labelKey?: string;
// labelName as specified on series options.
labelName?: string;
// xKey as specified on series options.
xKey: string;
// xValue as read from series data via the xKey property.
xValue?: any;
// xName as specified on series options.
xName?: string;
// yKey as specified on series options.
yKey: string;
// yValue as read from series data via the yKey property.
yValue?: any;
// yName as specified on series options.
yName?: string;
// Datum from the series data array that the tooltip is being rendered for.
datum: any;
// Series title or yName depending on series configuration.
title?: string;
// Series primary colour, as selected from the active theme, series options or formatter.
color?: CssColor;
// The ID of the series.
seriesId: string;
}
type CssColor = string
interface AgTooltipRendererResult {
// Title text for the tooltip header.
title?: string;
// Content text for the tooltip body.
content?: string;
// Tooltip title text color.
color?: string;
// Tooltip title background color.
backgroundColor?: string;
}
|
| boolean | Whether or not to show tooltips when the series are hovered over. |
| AgTooltipPositionOptions | The position of the tooltip. By default the tooltip follows the mouse pointer. position: AgTooltipPositionOptions;
type AgTooltipPositionOptions =
AgMovingTooltipPositionOptions
interface AgMovingTooltipPositionOptions {
// The type of positioning for the tooltip. By default, the tooltip follows the pointer.
type: AgTooltipPositionType;
// The horizontal offset in pixels for the position of the tooltip.
xOffset?: PixelSize;
// The vertical offset in pixels for the position of the tooltip.
yOffset?: PixelSize;
}
type AgTooltipPositionType = 'pointer' | 'node'
type PixelSize = number
|
| AgSeriesTooltipInteraction | Configuration for tooltip interaction. interaction: AgSeriesTooltipInteraction;
interface AgSeriesTooltipInteraction {
// Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
enabled: boolean;
}
|
Properties available on the AgPieSeriesTooltip interface.
| Function | Function used to create the content for tooltips. renderer = (
params: AgPieSeriesTooltipRendererParams
) => string | AgTooltipRendererResult;
interface AgPieSeriesTooltipRendererParams {
// calloutLabelKey as specified on series options.
calloutLabelKey?: string;
// calloutLabelName as specified on series options.
calloutLabelName?: string;
// sectorLabelKey as specified on series options.
sectorLabelKey?: string;
// sectorLabelName as specified on series options.
sectorLabelName?: string;
// angleKey as specified on series options.
angleKey: string;
// angleValue as read from series data via the angleKey property.
angleValue?: any;
// angleName as specified on series options.
angleName?: string;
// radiusKey as specified on series options.
radiusKey?: string;
// radiusValue as read from series data via the radiusKey property.
radiusValue?: any;
// radiusName as specified on series options.
radiusName?: string;
// Datum from the series data array that the tooltip is being rendered for.
datum: any;
// Series title or yName depending on series configuration.
title?: string;
// Series primary colour, as selected from the active theme, series options or formatter.
color?: CssColor;
// The ID of the series.
seriesId: string;
}
type CssColor = string
interface AgTooltipRendererResult {
// Title text for the tooltip header.
title?: string;
// Content text for the tooltip body.
content?: string;
// Tooltip title text color.
color?: string;
// Tooltip title background color.
backgroundColor?: string;
}
|
| boolean | Whether or not to show tooltips when the series are hovered over. |
| AgTooltipPositionOptions | The position of the tooltip. By default the tooltip follows the mouse pointer. position: AgTooltipPositionOptions;
type AgTooltipPositionOptions =
AgMovingTooltipPositionOptions
interface AgMovingTooltipPositionOptions {
// The type of positioning for the tooltip. By default, the tooltip follows the pointer.
type: AgTooltipPositionType;
// The horizontal offset in pixels for the position of the tooltip.
xOffset?: PixelSize;
// The vertical offset in pixels for the position of the tooltip.
yOffset?: PixelSize;
}
type AgTooltipPositionType = 'pointer' | 'node'
type PixelSize = number
|
| AgSeriesTooltipInteraction | Configuration for tooltip interaction. interaction: AgSeriesTooltipInteraction;
interface AgSeriesTooltipInteraction {
// Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
enabled: boolean;
}
|
Properties available on the AgHistogramSeriesTooltip interface.
| Function | Function used to create the content for tooltips. renderer = (
params: AgHistogramSeriesTooltipRendererParams
) => string | AgTooltipRendererResult;
interface AgHistogramSeriesTooltipRendererParams {
// Datum from the series data array that the tooltip is being rendered for.
datum: AgHistogramBinDatum<any>;
// xKey as specified on series options.
xKey: string;
// xValue as read from series data via the xKey property.
xValue?: any;
// xName as specified on series options.
xName?: string;
// yKey as specified on series options.
yKey: string;
// yValue as read from series data via the yKey property.
yValue?: any;
// yName as specified on series options.
yName?: string;
// Series title or yName depending on series configuration.
title?: string;
// Series primary colour, as selected from the active theme, series options or formatter.
color?: CssColor;
// The ID of the series.
seriesId: string;
}
interface AgHistogramBinDatum<DatumType> {
data: DatumType[];
aggregatedValue: number;
frequency: number;
domain: [ number, number ];
}
type CssColor = string
interface AgTooltipRendererResult {
// Title text for the tooltip header.
title?: string;
// Content text for the tooltip body.
content?: string;
// Tooltip title text color.
color?: string;
// Tooltip title background color.
backgroundColor?: string;
}
|
| boolean | Whether or not to show tooltips when the series are hovered over. |
| AgTooltipPositionOptions | The position of the tooltip. By default the tooltip follows the mouse pointer. position: AgTooltipPositionOptions;
type AgTooltipPositionOptions =
AgMovingTooltipPositionOptions
interface AgMovingTooltipPositionOptions {
// The type of positioning for the tooltip. By default, the tooltip follows the pointer.
type: AgTooltipPositionType;
// The horizontal offset in pixels for the position of the tooltip.
xOffset?: PixelSize;
// The vertical offset in pixels for the position of the tooltip.
yOffset?: PixelSize;
}
type AgTooltipPositionType = 'pointer' | 'node'
type PixelSize = number
|
| AgSeriesTooltipInteraction | Configuration for tooltip interaction. interaction: AgSeriesTooltipInteraction;
interface AgSeriesTooltipInteraction {
// Set to true to keep the tooltip open when the mouse is hovering over it, and enable clicking tooltip text
enabled: boolean;
}
|
