Skip to content

Events and HTML Legends

Jump to bottom
ipax77 edited this page May 22, 2026 · 1 revision

Events and HTML Legends

Chart events and HTML legends both connect the Chart.js canvas to Blazor UI. Events send selected Chart.js interactions into C#. HTML legends render legend items as Razor markup instead of using the canvas legend.

C# chart events

Events chart

ChartComponent always reports initialization. Other events are opt-in through ChartJsOptions and related option objects.

Options = new ChartJsOptions
{
    OnClickEvent = true,
    OnHoverEvent = true,
    OnResizeEvent = true,
    Animation = new Animation
    {
        OnProgressEvent = true,
        OnCompleteEvent = true
    },
    Plugins = new Plugins
    {
        Legend = new Legend
        {
            OnClickEvent = true,
            OnHoverEvent = true,
            OnLeaveEvent = true
        }
    }
}

Bind the chart event callback in Razor:

<ChartComponent @ref="chartComponent"
                ChartJsConfig="chartJsConfig"
                OnEventTriggered="EventTriggered" />

Then branch on the derived event type in C#:

private void EventTriggered(ChartJsEvent chartJsEvent)
{
    if (chartJsEvent is ChartJsInitEvent initEvent)
    {
        latestInitEvent = initEvent;
    }

    if (chartJsEvent is ChartJsResizeEvent resizeEvent)
    {
        latestResizeEvent = resizeEvent;
    }

    StateHasChanged();
}

The events sample also handles ChartJsLegendClickEvent to hide or show a dataset from C# when a canvas legend item is clicked.

HTML legend

HTML legend chart

The HTML legend sample hides the normal Chart.js legend and places a Blazor legend next to the chart:

<LegendComponent @ref="legendComponent"
                 ChartJsConfig="chartJsConfig"
                 ChartComponent="chartComponent" />

<ChartComponent @ref="chartComponent"
                ChartJsConfig="chartJsConfig"
                OnEventTriggered="ChartEventTriggered" />

LegendComponent inherits LegendComponentBase. The base component owns the interaction helpers and exposes generated legend items for Razor markup:

@inherits LegendComponentBase

@foreach (var item in LegendItems)
{
    <tr @onclick="e => HandleLegendItemClick(e, item)"
        @onmouseover="e => HandleLegendItemHover(e, item)"
        @onmouseleave="e => HandleLegendItemLeave(e, item)">
        <td>@item.Text</td>
    </tr>
}

UpdateLegend() asks the chart for legend items and refreshes the component. HandleLegendItemClick(...) toggles dataset visibility for ordinary datasets and data visibility for pie or doughnut data items. Hover and leave handlers can activate chart points and can be overridden for chart-specific styling.

The sample refreshes the legend after initialization and after datasets are added or removed:

private async Task ChartEventTriggered(ChartJsEvent chartJsEvent)
{
    if (chartJsEvent is ChartJsInitEvent)
    {
        await UpdateLegend().ConfigureAwait(false);
    }
}

Sample source

Clone this wiki locally