Blazor Toolbar Overview

    The Blazor Toolbar component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our IgbDataChart or IgbCategoryChart components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

    Blazor Toolbar Example


    Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

    @using IgniteUI.Blazor.Controls

    The following modules are required when using the IgbToolbar with the IgbDataChart component and it's features.

    // in Program.cs file

    You will also need to link an additional CSS file to apply the styling to the IgbToolbar component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />


    Tool Actions

    The following is a list of the different IgbToolAction items that you can add to the Toolbar.

    Each of these tools exposes an OnCommand event that is triggered by mouse click.

    New and existing tools can be repositioned and marked hidden using the OverlayId, BeforeId and AfterId properties on the IgbToolAction object. ToolActions also expose a Visibility property.

    The following example demonstrates hiding both the built-in ZoomReset and AnalyzeMenu menu tool actions. A new instance of the ZoomReset tool action is added and placed within the ZoomMenu by using the the AfterId property and assigning that to ZoomOut. This will ensure the new Reset tool is displayed at the bottom of the ZoomMenu.

    Blazor Data Chart Integration

    The Blazor Toolbar contains a Target property. This is used to link a component, such as the IgbDataChart as shown in the code below:


    Several pre-existing IgbToolAction items and menus become available when the IgbDataChart is linked with the Toolbar. Here is a list of the built-in Blazor IgbDataChart Tool Actions and their associated OverlayId:

    Zooming Actions

    Trend Actions

    • AnalyzeMenu: A IgbToolActionIconMenu that contains several options for configuring different options of the chart.
    • AnalyzeHeader: A sub section header.
    • LinesMenu: A sub menu containing various tools for showing different dashed horizontal lines on the chart.
      • LinesHeader: A sub menu section header for the following three tools:
        • MaxValue: A IgbToolActionCheckbox that displays a dashed horizontal line along the yAxis at the maximum value of the series.
        • MinValue: A IgbToolActionCheckbox that displays a dashed horizontal line along the yAxis at the minimum value of the series.
        • Average: A IgbToolActionCheckbox that displays a dashed horizontal line along the yAxis at the average value of the series.
    • TrendsMenu: A sub menu containing tools for applying various trendlines to the IgbDataChart plot area.
    • HelpersHeader: A sub section header.
    • SeriesAvg: A IgbToolActionCheckbox that adds or removes a IgbValueLayer to the chart's series collection using the ValueLayerValueMode of type Average.
    • ValueLabelsMenu: A sub menu containing various tools for showing different annotations on the IgbDataChart's plot area.
    • ShowCrosshairs: A IgbToolActionCheckbox that toggles mouse-over crosshair annotations via the chart's CrosshairsDisplayMode property.
    • ShowGridlines: A IgbToolActionCheckbox that toggles extra gridlines by applying a MajorStroke to the X-Axis.

    Save to Image Action

    • CopyAsImage: A IgbToolActionLabel that exposes an option to copy the chart to the clipboard.
    • CopyHeader: A sub section header.

    SVG Icons

    When adding tools manually, icons can be assigned using the RenderIconFromText method. There are three paramters to pass in this method. The first is the icon collection name defined on the tool eg. IconCollectionName. The second is the name of the icon defined on the tool eg. IconName, followed by adding the SVG string.

        Title="Custom Icon"
    @code {
        protected override async Task OnAfterRenderAsync(bool firstRender)
            var toolbar = this.toolbar;
            if (firstRender) {
        private IgbToolbar toolbar;
        public void ToolbarCustomIconOnViewInit()
        	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
        		string icon =
        			<svg width=""28px"" height=""28px"" stroke=""none"" viewBox=""0 0 3.5 3.5"" xmlns="""" xmlns:xlink="""" aria-hidden=""true"" role=""img"" class=""iconify iconify--gis"" preserveAspectRatio=""xMidYMid meet""><path d=""M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z"" fill=""#000000"" fill-rule=""evenodd""/></svg>
        		this.toolbar.RegisterIconFromTextAsync("CustomCollection", "CustomIcon", icon);

    Vertical Orientation

    By default the Blazor Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the Orientation property.

    <IgbToolbar Orientation="ToolbarOrientation.Vertical" />

    The following example demonstrates the vertical orientation of the Blazor Toolbar.

    API References

    Additional Resources