Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Sparklines - Tooltips

This section shows how sparkline tooltip styles and contents can be customised using the tooltip options.

Disabling Sparkline Tooltips

Sparkline tooltips are enabled by default. They can be disabled via the tooltip options as shown in the code snippet below:

sparklineOptions: {
    tooltip: {
        enabled: false, // removes sparkline tooltips
    }
}

Default Tooltip

The default tooltip will show the Y value of the hovered item in the Content section of the tooltip, whereas the X value (if it exists) is displayed in the Title section of the tooltip. See the screenshots below for illustrations of these two cases.

Tooltip without the title element
No Title
Tooltip with a title element
With Title

Customising Tooltip Appearance

The default sparkline tooltip has the following template:

<div class="ag-sparkline-tooltip">
    <div class="ag-sparkline-tooltip-title"></div>
    <div class="ag-sparkline-tooltip-content"></div>
</div>

The tooltips can be customised using a tooltip renderer function supplied to the tooltip options as shown below:

sparklineOptions: {
    tooltip: {
        renderer: tooltipRenderer // Add tooltip renderer callback function to customise tooltip styles and content
    }
}
  • The renderer is a callback function which receives data values associated with the highlighted data point.
  • It returns an object with the content and title properties containing plain text or inner HTML that is used for the Content and Title sections of the tooltip.

Here's an example renderer function.

const tooltipRenderer = (params) => {
    const { yValue, xValue } = params;
    return {
        title: new Date(xValue).toLocaleDateString(), // formats date X values
        content: yValue.toFixed(1), // format Y number values
    }
}
  • In the snippet above, the renderer function sets the tooltip content to render Y values formatted with 1 digit after the decimal point.
  • The title of the tooltips is set to X values provided in the params formatted using the toLocaleString() method. This is optional because if X values are provided in the data, they will be formatted and displayed in the tooltip title by default.

Accessing Row Data

The tooltip can also be customised to display data from other columns of the current row. This access is provideded by the input parameter supplied to the Tooltip Renderer, which includes a context object with a data property containing the row data.

The following snippet shows how values from the 'Symbol' column can be shown in the tooltip title:

const tooltipRenderer = (params) => {
    const { context } = params;
    return {
        title: context.data.symbol, // sets title of tooltips to the value for the 'symbol' field
    }
}

The following example demonstrates the above tooltip renderer:

Styling Tooltip Titles

The tooltip titles can be customised using the Tooltip Renderer. The renderer function can return style attributes such as color, backgroundColor and opacity for the tooltip title as shown below:

const tooltipRenderer = (params) => {
    return {
        // sets styles for tooptip title
        color: 'white',
        backgroundColor: 'red',
        opacity: 0.3
    }
}

The following example demonstrates the results of the tooltip title styles above:

Interfaces

SparklineTooltip

Properties available on the SparklineTooltip interface.

enabled
boolean
Set to false to disable tooltips.
container
The element to place the tooltip into. This can be used to confine the tooltip to a specific area which may be outside of the sparkline grid cell.
renderer
SparklineTooltipRenderer
A callback function used to create the content for the tooltips. This function should return an object or a HTML string used to render the tooltip. See TooltipRendererResult.
renderer: SparklineTooltipRenderer;

type SparklineTooltipRenderer = 
      (params: TooltipRendererParams) => TooltipRendererResult


interface TooltipRendererParams {
  // The grid context, includes row data, giving access to data from other columns in the same row. 
  context?: any;
  // The raw datum associated with the point. 
  datum: any;
  // The X value of the data point. 
  xValue: any;
  // The Y value of the data point. 
  yValue: any;
}

interface TooltipRendererResult {
  // Set to false to disable individual tooltip. 
  enabled?: boolean;
  // The content to display in each tooltip. 
  content?: string;
  // The title of the tooltip. 
  title?: string;
  // The CSS color for the title text. 
  color?: string;
  // The CSS color for the background of the tooltip title. 
  backgroundColor?: string;
  // The opacity of the background for the tooltip title. 
  opacity?: number;
}

TooltipRendererParams

Properties available on the TooltipRendererParams interface.

context
any
The grid context, includes row data, giving access to data from other columns in the same row.
datum
any
The raw datum associated with the point.
xValue
any
The X value of the data point.
yValue
any
The Y value of the data point.

TooltipRendererResult

Properties available on the TooltipRendererResult interface.

enabled
boolean
Set to false to disable individual tooltip.
content
string
The content to display in each tooltip.
title
string
The title of the tooltip.
color
string
The CSS color for the title text.
backgroundColor
string
The CSS color for the background of the tooltip title.
opacity
number
The opacity of the background for the tooltip title.

Next Up

Continue to the next section to learn about: Sparkline Points of Interest.