[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Collapse]Chart Control
   [Expand]Getting Started
   [Expand]Charting Basics
   [Expand]Series Views
   [Expand]Chart Elements
   [Expand]Providing Data
   [Expand]Data Representation
   [Expand]Appearance Customization
   [Collapse]End-User Features
    [Expand]Basic End-User Interaction
    [Expand]Tooltip and Crosshair Cursor
    [Expand]Animation
     Print and Export
     Hit Information
     Chart Designer for End-Users
     Chart Ribbon and Toolbars
     Integration with a Range Control
     Chart Wizard for End-Users
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]Examples
   [Expand]Additional Resources
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Chart Ribbon and Toolbars

The Ribbon and Toolbars allow users to perform basic charting tasks, for example, change a series's view type, Print and Export a chart or use the Chart Designer to customize the chart.

Note

The Chart Control can use only one command UI type at a time.

Demos:

Financial Charting - Shows the Chart Control with a Ribbon

Financial Indicators - Shows the Chart Control with Toolbars

Expanded How to Generate the Ribbon and Toolbars

The newly added Ribbon contains the Chart Tools page category with the Design and Other contextual pages, and the Toolbars contain the Design and Other groups of bars.

Note

See the Financial Options section for information on how to add the Financial Options page/toolbar.

Add the Ribbon

Click the Chart Control's smart-tag and select Create Ribbon:

Refer to the Ribbon Control for more information about the Ribbon.

Add the Toolbars

Click the Chart Control's smart-tag and select the Create BarManager link:

Refer to the Bars for more information about the Bar Manager.

Expanded Add, Remove or Restore UI Elements

After the Chart Control's Ribbon/Toolbars are added, the smart tag's menu includes the following commands:

To remove a UI element from the Ribbon or Toolbar, select the element and click the Delete key.

Expanded Design

The Design page/toolbar allows you to customize the chart's appearance and series' view type.

The Design page/toolbar includes the following groups:

  • Chart Type group elements allow you to change the view type of all chart series. If the chart does not contain series, a new series will be added.
  • Appearance group elements allow you to configure the chart's palette (see ChartControl.PaletteName) and appearance (see ChartControl.AppearanceName).

Expanded Other

The Other page/toolbar elements allow you to perform the following actions:

Expanded Financial Options

Select the Create Financial Bars link in the chart control smart tag's menu to add the Financial Options page/toolbar.

The Financial Options page/toolbar provides the following commands:

  • Change a view for the series selected in the Series list.
  • Draw Fibonacci Indicators for the series selected in the Series list.
  • Add technical Indicators for the series selected in the Series list.
  • Remove indicators. Enable the Remove Indicator option and click an indicator to remove it. If a single indicator is in a separate pane, you can click the pane to remove the indicator.
  • Change the date-time x-axis measurement units. See the How to Add New Measurement Units or Periods section to learn how to extend the list of predefined axis measurement units.
  • Set the date-time x-axis visible range to a predefined interval. See the How to Add New Measurement Units or Periods section to learn how to extend the list of predefined time periods.

How to Add Series Views to the View Type List

You can customize the list of views in the Ribbon and the Toolbar.

Click the View Type element's smart tag. Select the All Properties... item.

Click the Options.Items property's ellipsis button. To select multiple views in the Choose Series View dialog, press Ctrl or Shift and click the series' view icons.

How to Add New Measurement Units or Periods

You can customize the list of measurement units in the Ribbon and Toolbar.

Click the Axis Unit (Period) element's smart tag. Select the All Properties... item.

Click the Options.Items property's ellipsis button. Use the Add button to add a new item. Specify the DateTimeScaleOptions.MeasureUnit and DateTimeScaleOptions.MeasureUnitMultiplier properties.

Note

You can only configure axis units and periods for date-time x-axes.

Provide Custom Actions when Drawing Indicators

The following example shows how to handle the CheckedChanged (see RepositoryItemCheckEdit.CheckedChanged) events of the Indicators group's items (DrawTrendLineIndicatorBarItem, DrawFibonacciArcsIndicatorBarItem, DrawFibonacciFansIndicatorBarItem, DrawFibonacciRetracementIndicatorBarItem and RemoveIndicatorBarItem) to disable the Crosshair Cursor and scrolling capabilities while you draw or remove an indicator:

Is this topic helpful?​​​​​​​