Tooltip Callbacks

Tooltip Callbacks

Tooltips are a common place to mix C# chart configuration with JavaScript formatting. The tooltip callback sample switches between content formatting, color styling, point styling, custom dataset metadata, and an external tooltip renderer.

Choose tooltip callbacks from C#

TooltipCallbacks stores the ChartJsFunction names Chart.js should call for each tooltip part:

private static readonly TooltipCallbacks ContentCallbacks = new()
{
    Title = ChartJsFunction.FromName("formatTooltipContentTitle"),
    Label = ChartJsFunction.FromName("formatTooltipContentLabel"),
    Footer = ChartJsFunction.FromName("formatTooltipContentFooter")
};

private static readonly TooltipCallbacks ColorCallbacks = new()
{
    Title = ChartJsFunction.FromName("formatTooltipColorTitle"),
    Label = ChartJsFunction.FromName("formatTooltipContentLabel"),
    LabelColor = ChartJsFunction.FromName("tooltipLabelColor"),
    LabelTextColor = ChartJsFunction.FromName("tooltipLabelTextColor")
};

Apply a callback set through the tooltip options:

Plugins = new Plugins
{
    Tooltip = new Tooltip
    {
        Enabled = true,
        Callbacks = ContentCallbacks,
        DisplayColors = true
    }
}

When the sample switches designs, it updates the tooltip options and sends the options update to the chart:

tooltip.Callbacks = callbacks;
tooltip.Enabled = enabled;
tooltip.External = external;
tooltip.UsePointStyle = usePointStyle;
chartJsConfig.UpdateChartOptions();

Use custom dataset metadata

The sample derives a LineDataset with a tooltip-only metadata collection. Its JavaScript callback can then read context.dataset.tooltipPoints[context.dataIndex].

private sealed record CustomTooltipDataset : LineDataset
{
    public IReadOnlyList<CustomTooltipPoint> TooltipPoints { get; init; } = [];
}

This is useful when the plotted value is small, but the tooltip should show richer source data such as names, percentages, counts, or formatted descriptions.

External tooltip rendering

Chart.js can hand tooltip rendering to a JavaScript callback:

Tooltip = new Tooltip
{
    Enabled = false,
    External = ChartJsFunction.FromName("renderExternalTooltip")
}

The callback module still needs to be registered with AddChartJs(...), just as on the Callbacks and Plugins page.

Sample source

• TooltipCallbacksChartComp.razor
• chartJsCallbacks.js
• Tooltip callback live sample