How to Add Runtime Customization Toolbars to Charts in WinForms Apps
Tags: webdev, tutorial, dotnet, devops
Published: 2022-09-26 15:16:44

---
canonical_url: https://www.grapecity.com/blogs/how-to-add-runtime-customization-toolbars-to-charts-in-winforms-apps
description: Learn how to add runtime customization toolbars to charts in WinForms apps. See more from ComponentOne today.
---

When we think of numerical data, charts come to our mind. Charts are visual tools frequently used for data visualization & analysis. Charts can be customized to visualize data in multiple ways, i.e., line charts, column charts, area charts, and many more. But these customizations are often defined in the code, where the end-user has no control over the chart customizations.

[FlexChart](https://www.grapecity.com/flexchart/), ComponentOne's .NET charting control for WinForms, now has a built-in toolbar that lets the end-user customize many chart aspects at runtime. For example, change chart type/color palette, alter current legends/data label settings, export, print charts, etc. So, the toolbar helps your end-user customize the chart's appearance.

There could be multiple scenarios where a user may want to customize a chart at runtime. The most common use case could be an analytics dashboard view. For example, an e-commerce website analytics dashboard may look like this.

![Dashboard](https://files.grapecity.com/gc-website-media/j1yp0dp2/01-dashboard.png?width=500&height=257.32217573221754)

But you can see, there is not much a user could do apart from viewing these charts. So, let's start by adding a toolbar to FlexChart.

### Adding FlexChart Toolbar

You can add a toolbar for FlexChart in just two steps.

1\. Drag and drop FlexChart on the Form.

![Flexchart](https://files.grapecity.com/gc-website-media/b2dbcfpt/02-flexchartdrag.gif?width=500&height=250.7278020378457)

2\. Right-click the chart and select the ‘**Add Toolbar**’ option from the context menu.

![Toolbar](https://files.grapecity.com/gc-website-media/5lvdl0rr/03-toolbar.png?width=500&height=260.65573770491807)

3\. This will add a toolbar docked to the top of the chart.

![Winforms](https://files.grapecity.com/gc-website-media/30peuha1/04-winforms.png?width=500&height=222.22222222222223)

So, now our dashboard view will look like this.

![Dashboard](https://files.grapecity.com/gc-website-media/v5ybvg2i/05-winforms.png?width=500&height=260.334903192046)

Our next step would be to customize these charts using FlexChart Toolbar.

### Using FlexChart Toolbar

#### Changing ChartType

The ChartType dropdown list view provides different chart and stacking types. So, you can easily customize the chart type as follows:

![Chart Type](https://files.grapecity.com/gc-website-media/24weux0h/06-charttype.gif?width=500&height=304.79896238651105)

#### Changing Palette

The Palette dropdown list view provides different color options for the user.

![Palette](https://files.grapecity.com/gc-website-media/akqbl5jn/07-palette.gif?width=500&height=303.50194552529183)

#### Changing Legend Position

The Legend dropdown list view provides different legend position options.

![Legend](https://files.grapecity.com/gc-website-media/wvna00w2/08-legend.gif?width=500&height=303.8961038961039)

Similarly, we can use other toolbar options to customize the chart. And this is what our dashboard looks like after customizing using the toolbar.

![Dashboard](https://files.grapecity.com/gc-website-media/psggej4n/09-winforms.png?width=500&height=267.6822633297062)

**FlexChart** also provides a Ribbon-based toolbar in addition to the already available toolbar. It has been designed to control FlexChart’s settings at runtime with the Office 365-based UI. The **Chart Ribbon** comes with a flat-style user interface with tabs, groups, items, menu, etc., and lets you switch between full and simplified views. Please refer [**here**](https://www.grapecity.com/componentone/docs/win/online-flexchart/chart-ribbon.html) for more information regarding the ribbon toolbar.

### Conclusion

In this article, we learned about the runtime customization of FlexChart using FlexChartToolbar. However, this is not the end, as The FlexChartToolbar is inherited from the standard WinForms [**ToolStrip**](https://docs.microsoft.com/en-us/dotnet/desktop/winforms/controls/toolstrip-control-overview-windows-forms?view=netframeworkdesktop-4.8) control and can be used or customized similarly. You can refer [**here**](https://www.grapecity.com/componentone/docs/win/online-flexchart/tool-bar.html) to learn more about FlexChart Toolbar.

You can download the demo [**here**](https://files.grapecity.com/gc-website-media/0dafciqq/winflexchartdesignerdemo.zip).

Please feel free to comment down if you have any queries or suggestions.