# Chart Ribbon

Get started with modern looking, high performance WinForms FlexChart that features Office 365-based ribbon UI to customize your chart at runtime.

## Content

**FlexChart** provides a Ribbon-based toolbar in addition to the already available [toolbar](/componentone/docs/win/online-flexchart/features/chart-designer/tool-bar). 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 it also lets you switch between full and simplified views. With this chart feature, you can categorize menu items into groups and tabs, and achieve a clean and organized look, similar to what Microsoft offers in its Office 365 applications.

The image below depicts the ribbon in its simplified (default) and compact look.

![C1WinForms FlexChart - Chart with ribbon showing demographics ](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/ribbon-flexchart.png)

In FlexChart, the Ribbon control is represented by [C1Ribbon](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.Ribbon.10/C1.Win.Ribbon.C1Ribbon.html) class of the [C1.Win.Ribbon](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.Ribbon.10/C1.Win.Ribbon.html) assembly. All chart-based ribbon features of FlexChart can be accessed using the [C1.Win.Chart.Ribbon](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.Toolbar.10/C1.Win.Chart.Ribbon.html) namespace, which is a member of the [C1.Win.FlexChart.Toolbar](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.Toolbar.10/C1.Win.Chart.Toolbar.html) assembly. This namespace provides all the essential classes to create ribbon items related to chart appearance, chart elements, axes, legends etc.

### Accessing Chart Ribbon

The Ribbon control can be accessed from the context menu using the **Add Ribbon** option or from the **FlexChart Task** menu by selecting the **Add Ribbon** option. When you click the option using either menus, a simplified ribbon toolbar appears docked at the top of the FlexChart control.

This is how the ribbon appears by default at design time, which is in a simplified view.

![C1WinForms FlexChart - UI of simplified ribbon](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/simplified-ribbon.png)

In the simplified ribbon view, some elements are shown in a single row, while others can be accessed using the ellipsis ![Ellipsis button](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/ellipsis.png) button. You can switch between simple and full view using the chevron ![Chevron button UI](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/chevron.png) button as shown in the GIF below.

![C1WinForms FlexChart - Shifting between simplified and full ribbon chart](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/chart-ribbon-runtime-gif.gif)

### Design-Time Support

The Chart Ribbon provides design time support using the **C1Ribbon Tasks** menu and the **Properties** window.

The image below shows the **C1Ribbon Tasks** menu which lets the user load or save ribbon templates, change Quick Access Toolbar (QAT) location, show or hide tab header, and enable or disable the smart designer.

![C1WinForms FlexChart - Menu UI](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/ribbon-tasks-menu.png)

The ribbon's smart designer enables you to have full control over creating a powerful UI by providing floating toolbars to customize different types of ribbon elements at design time.

![C1WinForms FlexChart - Activate smart designer](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/smart-designer.gif)
The Chart Ribbon also provides Collection Editors to add, remove or edit items, which can be accessed using the Properties window. For instance, you can add a group to the ribbon using the [RibbonGroupCollection](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.Ribbon.10/C1.Win.Ribbon.RibbonGroupCollection.html) Editor and menu items using the **MenuItemsCollection** Editor.

### Adding Chart-Based Groups

At design time, a Chart Ribbon comes with a single chart tab (represented by the [ChartRibbonTab](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.Toolbar.10/C1.Win.Chart.Ribbon.ChartRibbonTab.html) class) and the following groups with predefined items under the tab:

* **Chart Type**: Provides menu items for indicating the chart type and is represented by the [ChartTypeRibbonGroup](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.Toolbar.10/C1.Win.Chart.Ribbon.ChartTypeRibbonGroup.html) class.
* **Settings**: Provides menu items related to the chart settings and is represented by the [ChartSettingsRibbonGroup](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.Toolbar.10/C1.Win.Chart.Ribbon.ChartSettingsRibbonGroup.html) class,
* **Export**: Provides menu items related to the export settings in different image formats, and is represented by the [ExportRibbonGroup](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.Toolbar.10/C1.Win.Chart.Ribbon.ExportRibbonGroup.html) class.
* **Print**: Provides print settings such as print preview option, and is represented by the [PrintRibbonGroup](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.FlexChart.Toolbar.10/C1.Win.Chart.Ribbon.PrintRibbonGroup.html) class.

The chart tab groups are depicted in the following image:

![C1WinForms FlexChart - Ribbon UI](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/full-ribbon.png)

You can add more predefined group types to the Chart Ribbon. The FlexChart control provides many classes for adding ribbon groups for customizing chart appearance, axes, elements, and trendline.

The image below shows the ribbon UI with different ribbon groups.

![C1WinForms FlexChart - Ribbon UI with groups](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/add-more-groups.png)

You can add ribbon groups using the **Add** method of [RibbonGroupCollection](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.Ribbon.10/C1.Win.Ribbon.RibbonGroupCollection.html) class, which takes the ribbon group name as a parameter as shown in the following code. In this example, we add **ChartAppearanceRibbonGroup**, **AxesRibbonGroup**, **ChartElementsRibbonGroup**, **TrendLineRibbonGroup**, and **ChartRangeRibbonGroup** to the ribbon.

```csharp
// Add chart-based groups to the tab
chartRibbonTab1.Groups.Add(new ChartAppearanceRibbonGroup());
chartRibbonTab1.Groups.Add(new AxesRibbonGroup());
chartRibbonTab1.Groups.Add(new ChartElementsRibbonGroup());
chartRibbonTab1.Groups.Add(new TrendLineRibbonGroup());
//Add Range Selector RibbonGroup to the RibbonTab
chartRibbonTab1.Groups.Add(new ChartRangeRibbonGroup());
```

Similarly, you can add **TimeRangeRibbonGroup**, **SeriesRibbonMenu** and other groups to the ribbon.

### Adding Chart-Based Menus

FlexChart lets you add many menus in the Ribbon such as Axis menu, Legend menu, Stacking menu etc. These menus are provided by FlexChart through their corresponding menu-based classes.

The image below shows the ribbon UI with different ribbon menus.

![C1WinForms FlexChart - Ribbon menu](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/add-menu-items.png)

For example, menus for Axis, Legend and Stacking can be added using the **Add** method of [RibbonItemCollection](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.Ribbon.10/C1.Win.Ribbon.RibbonItemCollection.html) class which takes the ribbon menu name as a parameter as shown in the following code:

```csharp
// Add chart-based menu items to the tab
ribbonGroup1.Text = "Plot";
ribbonGroup1.Items.Add(new AxisRibbonMenu(C1.Chart.AxisType.X));
ribbonGroup1.Items.Add(new LegendRibbonMenu());
ribbonGroup1.Items.Add(new StackingRibbonMenu());
```

```vbnet
' Add chart-based menu items to the tab
ribbonGroup1.Text = "Plot"
ribbonGroup1.Items.Add(New AxisRibbonMenu(C1.Chart.AxisType.X))
ribbonGroup1.Items.Add(New LegendRibbonMenu())
ribbonGroup1.Items.Add(New StackingRibbonMenu())
```

### Multi-Tab Ribbon

FlexChart lets you add multiple tabs to the ribbon using the **Add Tab** option of the Ribbon Floating toolbar or the [RibbonTabCollection](/componentone/api/win/online-flexchart/dotnet-api/C1.Win.Ribbon.10/C1.Win.Ribbon.RibbonTabCollection.html) Editor.

![C1WinForms FlexChart - Floating toolbars](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/floating-toolbar-ribbon.png)

You can further add groups to these tabs, to obtain a multi-tab ribbon as shown below:

![C1WinForms FlexChart - Ribbon UI with tabs](https://cdn.mescius.io/document-site-files/images/13ef049a-dbc7-444f-94c2-9a9cd1c2f895/images/tabs-ribbon.png)

The following code shows how to add groups to two tabs named Elements and Export:

```csharp
// Add multi-tabs to the ribbon control
ribbonTab1.Text = "Elements";            
ribbonTab1.Groups.Add(new ChartElementsRibbonGroup());
ribbonTab1.Groups.Add(new AxesRibbonGroup());
ribbonTab1.Groups.Add(new TrendLineRibbonGroup());
ribbonTab2.Text = "Export";
ribbonTab2.Groups.Add(new ExportRibbonGroup());
ribbonTab2.Groups.Add(new PrintRibbonGroup());
```

```vbnet
' Add multi-tabs to the ribbon control
ribbonTab1.Text = "Elements"
ribbonTab1.Groups.Add(New ChartElementsRibbonGroup())
ribbonTab1.Groups.Add(New AxesRibbonGroup())
ribbonTab1.Groups.Add(New TrendLineRibbonGroup())
ribbonTab2.Text = "Export"
ribbonTab2.Groups.Add(New ExportRibbonGroup())
ribbonTab2.Groups.Add(New PrintRibbonGroup())
```

>type=note
> **Note**: As the Chart Ribbon is inherited from the **C1Ribbon** class. You can refer to all the design-time and run-time functionalities of the Chart Ribbon in detail from the Ribbon control's [documentation](https://developer.mescius.com/componentone/docs/win/online-ribbon/overview.html).