React Toolbar Overview

    The React 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 IgrDataChart or IgrCategoryChart components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.

    React Toolbar Example

    Dependencies

    Install the Ignite UI for React layouts, inputs, charts and core packages:

    npm install igniteui-react-layouts
npm install igniteui-react-inputs
npm install igniteui-react-charts
npm install igniteui-react-core

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

    import { IgxToolbarModule } from 'igniteui-react-layouts';
import { IgrDataChartToolbarModule, IgrDataChartCoreModule, IgrDataChartCategoryModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule, IgrDataChartCategoryTrendLineModule  } from 'igniteui-react-charts';

IgxToolbarModule.register();
IgrDataChartToolbarModule.register();
IgrDataChartCoreModule.register();
IgrDataChartCategoryModule.register();
IgrDataChartAnnotationModule.register();
IgrDataChartInteractivityModule.register();
IgrDataChartCategoryTrendLineModule.register();

    Usage

    Tool Actions

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

    Each of these tools exposes an OnCommand event that is triggered by mouse click. Note, the IgrToolActionIconMenu is a wrapper for other tools that can also be wrapped inside a IgrToolActionIconMenu.

    New and existing tools can be repositioned and marked hidden using the overlayId, beforeId and afterId properties on the IgrToolAction object. ToolActions also expose a visibility property.

    The following example demonstrates a couple of features. First you can group tools together in the IgrToolActionSubPanel including hiding built in tools such as the ZoomReset and AnalyzeMenu menu tool actions. In this example a new instance of the ZoomReset tool action within the ZoomMenu by using the the afterId property and assigning that to ZoomOut to be precise with it's placement. It is also highlighted via the isHighlighted property on the tool.

    React Data Chart Integration

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

      private toolbar: IgrToolbar
  private toolbarRef(r: IgrToolbar) {
      this.toolbar = r;
      this.setState({});
  }
  private chart: IgrDataChart
  private chartRef(r: IgrDataChart) {
      this.chart = r;
      this.toolbar.target = this.chart;
      this.setState({});
  }
  public render(): JSX.Element {
        return (
      <div>
        <IgrToolbar
          ref={this.toolbarRef}>
        </IgrToolbar>
      </div>

      <div>
        <IgrDataChart
          ref={this.chartRef}>
        </IgrDataChart>
      </div>
    );
  }

    Several pre-existing IgrToolAction items and menus become available when the IgrDataChart is linked with the Toolbar. Here is a list of the built-in React IgrDataChart Tool Actions and their associated overlayId:

    Zooming Actions

    Trend Actions

    • AnalyzeMenu: A IgrToolActionIconMenu 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 IgrToolActionCheckbox that displays a dashed horizontal line along the yAxis at the maximum value of the series.
        • MinValue: A IgrToolActionCheckbox that displays a dashed horizontal line along the yAxis at the minimum value of the series.
        • Average: A IgrToolActionCheckbox 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 IgrDataChart plot area.
    • HelpersHeader: A sub section header.
    • SeriesAvg: A IgrToolActionCheckbox that adds or removes a IgrValueLayer 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 IgrDataChart's plot area.
    • ShowCrosshairs: A IgrToolActionCheckbox that toggles mouse-over crosshair annotations via the chart's crosshairsDisplayMode property.
    • ShowGridlines: A IgrToolActionCheckbox that toggles extra gridlines by applying a MajorStroke to the X-Axis.

    Save to Image Action

    • CopyAsImage: A IgrToolActionLabel 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.

    Data URL Icons

    Similarly to adding svg, you can also add an Icon image from a URL via the registerIconFromDataURL. The method's third parameter would be used to enter a string URL.

    The following snippet shows both methods of adding an Icon.

    public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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.registerIconFromText("CustomCollection", "CustomIcon", icon);
}

    public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");

}

    public toolbarCustomIconOnViewInit(): void {

  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/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.registerIconFromText("CustomCollection", "CustomIcon", icon);

}

    public toolbarCustomIconOnViewInit(): void {

  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
  
}

    @code {

    protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var toolbar = this.toolbar;

    if (firstRender) {
        this.ToolbarCustomIconOnViewInit();
    }
}

private IgbToolbar toolbar;

public void ToolbarCustomIconOnViewInit()
{
	this.toolbar.EnsureReady().ContinueWith(new Action<Task>((e) =>
	{
        this.toolbar.RegisterIconFromDataURLAsync("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
	}));
}

    }

    
```tsx
<IgrToolbar orientation="Vertical" />

    Vertical Orientation

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

    <IgrToolbar orientation="Vertical" />

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

    Color Editor

    You can add a custom color editor tool to the the React Toolbar, which will also work with the Command event to perform custom styling to your application.

    <igc-toolbar
  name="toolbar"
  id="toolbar">
      <igc-tool-action-color-editor
      title="Series Brush Color"
      name="colorEditorTool"
      id="colorEditorTool">
      </igc-tool-action-color-editor>
</igc-toolbar>

    <IgrToolbar
    ref={this.toolbarRef}
    target={this.chart}>
    <IgrToolActionColorEditor
        title="Series Brush Color"
        name="colorEditorTool">
    </IgrToolActionColorEditor>
</IgrToolbar>

    The following example demonstrates styling the React Data Chart series brush with the Color Editor tool.

    API References

    Additional Resources