How to customize toolbar items in WinForms Chart control?

The WinForms Chart built-in toolbar can be displayed by setting the ShowToolbar property to true. The toolbar can be customized by adding or removing toolbar Items and modifying its appearance.

Customizing Toolbar Item Appearance

The appearance of the chart toolbar and its items can be customized using the following properties:

• ButtonBackColor
• ButtonForeColor
• Border style
• AutoSize
• ButtonSize
• Spacing
• ShowBorder

For more details on customizing toolbar, refer to the WinForms Chart documentation.

this.chartControl1 = new ChartControl();
. . .

//Show the chart toolbar.
this.chartControl1.ShowToolbar = true;
 
// Specifes ToolBar style
this.chartControl1.ToolBar.AutoSize = true;
this.chartControl1.ToolBar.Border.ForeColor = Color.Blue;
this.chartControl1.ToolBar.BackColor = Color.BlanchedAlmond;
// Specifies the Toolbar Item Style.
this.chartControl1.ToolBar.ButtonBackColor = Color.White;
this.chartControl1.ToolBar.ButtonForeColor = Color.Maroon;

Me.chartControl1 = New ChartControl()
. . .

' Show the chart toolbar
Me.chartControl1.ShowToolbar = True

' Specifies ToolBar style
Me.chartControl1.ToolBar.AutoSize = True
Me.chartControl1.ToolBar.Border.ForeColor = Color.Blue
Me.chartControl1.ToolBar.BackColor = Color.BlanchedAlmond

' Specifies the Toolbar Item Style
Me.chartControl1.ToolBar.ButtonBackColor = Color.White
Me.chartControl1.ToolBar.ButtonForeColor = Color.Maroon

Adding Items in chart Toolbar

Add the custom toolbar items by using the ChartToolBarCommandItem in the Toolbar Items collection as shown in the following code example to ZoomIn and ZoomOut.

this.chartControl1.EnableXZooming = true;
this.chartControl1.ZoomFactorX = 0.5;

//Adding the custom Toolbar items.
ChartToolBarCommandItem zoomIn = new ChartToolBarCommandItem();
zoomIn.Command = ChartCommands.ZoomIn;
zoomIn.ToolTip = "ZoomIn";
this.chartControl1.ToolBar.Items.Add(zoomIn);
 
ChartToolBarCommandItem zoomOut = new ChartToolBarCommandItem();
zoomOut.Command = ChartCommands.ZoomOut;
zoomOut.ToolTip = "ZoomOut";
this.chartControl1.ToolBar.Items.Add(zoomOut);

Me.chartControl1.EnableXZooming = True
Me.chartControl1.ZoomFactorX = 0.5

' Adding the custom Toolbar items
Dim zoomIn As New ChartToolBarCommandItem()
zoomIn.Command = ChartCommands.ZoomIn
zoomIn.ToolTip = "ZoomIn"
Me.chartControl1.ToolBar.Items.Add(zoomIn)

Dim zoomOut As New ChartToolBarCommandItem()
zoomOut.Command = ChartCommands.ZoomOut
zoomOut.ToolTip = "ZoomOut"
Me.chartControl1.ToolBar.Items.Add(zoomOut)

Output

Conclusion

I hope you enjoyed learning about how to customize toolbar items in Chart control.

You can refer to our WinForms Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our WinForms Chart examples to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!