Tooltip

Display interactive tooltips when hovering over the graph to show precise data values at any point.

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Basic Usage

Enable tooltips by setting tooltip.enabled to true:

const graph = new Graph.Graph(
    "container",
    {
        tooltip: {
            enabled: true,
        },
    },
    lines
);

Options

Option	Type	Default	Description
enabled	boolean	false	Enable/disable tooltip feature
mode	"interpolated" | "nearest"	"nearest"	How Y values are determined at cursor position
trackingLine	TrackingLineOptions	See below	Vertical line that follows the cursor
content	TooltipContentOptions	See below	Tooltip box appearance
indicators	TooltipIndicatorOptions	See below	Dots shown on lines at intersection
format	TooltipFormatOptions	See below	Value formatting

Mode

The mode option determines how Y values are calculated when hovering:

Value	Description
nearest	Snaps to the nearest actual data point (default)
interpolated	Smoothly interpolates between data points

Nearest Mode (Default)

Snaps to actual data points with a smooth animation:

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Interpolated Mode

Shows values at any position along the line:

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Tracking Line Options

Configure the vertical line that follows the cursor:

Option	Type	Default	Description
show	boolean	true	Show/hide tracking line
colour	string	"rgba(0, 0, 0, 0.5)"	Line color
width	number	1	Line width in pixels
style	"solid" | "dashed"	"solid"	Line style

Dashed Tracking Line

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Content Options

Configure the tooltip box appearance:

Option	Type	Default	Description
show	boolean	true	Show/hide tooltip box
backgroundColor	string	"rgba(255, 255, 255, 0.95)"	Background color
textColour	string	"#333"	Text color
fontSize	number	12	Font size in pixels
padding	number	8	Inner padding in pixels
borderRadius	number	4	Corner radius in pixels

Indicator Options

Configure the dots shown on lines at the cursor position:

Option	Type	Default	Description
show	boolean	true	Show/hide indicator dots
radius	number	4	Dot radius in pixels

Hidden Indicators

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

Format Options

Customize how values are displayed in the tooltip:

Option	Type	Default	Description
yValue	(value: number, label: string) => string	(y, label) => \${label}: ${y.toFixed(2)}``	Custom value formatter

Custom Formatting

const graph = new Graph.Graph(
    "container",
    {
        tooltip: {
            enabled: true,
            format: {
                yValue: (value, label) =>
                    `${label}: $${value.toLocaleString()}`,
            },
        },
    },
    lines
);

Complete Example

Render Time0 ms

Canvas Size600 × 350

Data Points0

Series Count0

TypeScript Types

type TooltipOptions = {
    enabled?: boolean;
    mode?: "interpolated" | "nearest";
    trackingLine?: {
        show?: boolean;
        colour?: string;
        width?: number;
        style?: "solid" | "dashed";
    };
    content?: {
        show?: boolean;
        backgroundColor?: string;
        textColour?: string;
        fontSize?: number;
        padding?: number;
        borderRadius?: number;
    };
    indicators?: {
        show?: boolean;
        radius?: number;
    };
    format?: {
        yValue?: (value: number, label: string) => string;
    };
};

TIP

Tooltips work best with the legend enabled so users can identify which series each value belongs to.