Skip to main content
BuyLog In
WPF Controls
Search in…
Docs > WPF Controls > Controls and Libraries > Charts Suite > Chart Control > Chart Ribbon and Toolbars
All docs
V24.1
WPF Controls
Prerequisites
What's Installed
.NET/.NET Core Support
Common Concepts
MVVM Support
MVVM Framework
Controls and Libraries
Reporting
Data Grid
Ribbon, Bars and Menu
Charts Suite
Chart Control
Getting Started
Provide Data
Data Aggregation
Calculate Summaries
Filter Chart Data
Diagram
Series
Panes
Axes
Legends
Chart Titles
Annotations
Chart Themes and Palettes
Histogram
Zoom, Scroll, and Rotate the Chart
Tooltip and Crosshair Cursor
Hit-Testing
Selection
Animation
Print and Export
Chart Designer for Developers
Chart Designer for End Users
Chart Ribbon and Toolbars
Chart Clients for the Range Control
Save and Load the Chart Layout
Examples
Additional Resources
Chart3D Control
Pivot Grid
Scheduler
Spreadsheet
Rich Text Editor
Tree List
Gauge Controls
Map Control
Layout Management
Windows Modern UI
Printing-Exporting
Data Editors
Navigation Controls
Spell Checker
Property Grid
PDF Viewer
TreeMap Control
Gantt Control
Diagram Control
Windows and Utility Controls
Dialogs, Notifications and Panels
Office File API
Sankey Diagram Control
Sunburst Control
Heatmap Control
Scheduler (legacy)
Localization
Security Considerations
Support, Debug, and Troubleshooting
Redistribution and Deployment
Desktop & Web App UI Framework (Powered by EF Core)
Get More Help
API Reference
Download CHM

Chart Ribbon and Toolbars

  • 8 minutes to read

Chart Ribbon and Toolbars allow users to change the on-screen data range, print/export a chart, add indicators, and so on. See the Toolbar and Ribbon Commands section for a complete list of features.

This document consists of the following sections:

Toolbar and Ribbon Commands

The chart ribbon and toolbars allow you to perform the following operations:

Chart Toolbars

Chart Toolbars

Chart Ribbon (the *Common* tab)

Chart Ribbon (the Common tab)

Chart Ribbon (the *Financial Options* tab)

Chart Ribbon (the Financial Options tab)

  1. Invokes the Chart Designer.
  2. Saves the chart layout to a file.
  3. Restores the chart from a file.
  4. Invokes the Print Preview dialog for the chart.
  5. Shows the Print dialog.
  6. Saves the chart image to a file.
  7. Displays a list of available palettes.

  8. Sets the series used to plot indicators.

    Note: The items from 9 to 12 allow you to plot an indicator based on two series points. To add such an indicator, click a series point and drag the mouse to the series point.

  9. Activates Trend Lines mode.

  10. Enables Fibonacci Arcs mode.
  11. Enables Fibonacci Fans mode.
  12. Enables Fibonacci Retracement mode.
  13. Turns on the mode that allows you to remove indicators. Click an indicator on the chart to remove this indicator.
  14. Adds a technical indicator to the series selected in the Series list.
  15. Specifies the date-time x-axis measurement unit.
  16. Allows you to specify a visible data range.
  17. Enables you to add a text annotation. To do this, click on the chart and type the text.
  18. Enables you to add an image annotation. To do this, click on the chart and select an image in the invoked dialog.
  19. Allows you to add a horizontal constant line. To create a constant line, click on the chart. Double-click the constant line’s title to edit it.
  20. Allows you to add a vertical constant line. To create a constant line, click on the chart. Double-click the constant line’s title to edit it.

You can also add new commands to the ribbon or toolbars, and remove unnecessary options.

Add Toolbars to a Chart

To generate toolbars, click the chart’s smart tag and select Create Bars:

Show the Auto-Generated Toolbar Markup
  <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
          xmlns:local="clr-namespace:ChartToolbar"
          xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
          xmlns:dxct="http://schemas.devexpress.com/winfx/2008/xaml/charts/themekeys"
          xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
          x:Class="ChartToolbar.MainWindow"
          mc:Ignorable="d"
          Title="MainWindow" Height="540" Width="920" Loaded="Window_Loaded">
      <DockPanel>
          <dxb:BarManager DockPanel.Dock="Top" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarManager}}" dxc:ChartControlBase.Chart="{Binding ElementName=chart}">
              <dxb:BarManager.Bars>
                  <dxb:Bar x:Name="RunDesignerGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarRunDesignerGroup}}">
                      <dxb:BarButtonItem x:Name="RunDesignerItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RunDesignerItem}}"/>
                  </dxb:Bar>
                  <dxb:Bar x:Name="TemplatesGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarTemplatesGroup}}">
                      <dxb:BarButtonItem x:Name="SaveAsTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SaveAsTemplateItem}}"/>
                      <dxb:BarButtonItem x:Name="LoadTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=LoadTemplateItem}}"/>
                  </dxb:Bar>
                  <dxb:Bar x:Name="PrintAndExportGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarPrintAndExportGroup}}">
                      <dxb:BarButtonItem x:Name="PrintPreviewItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PrintPreviewItem}}"/>
                      <dxb:BarButtonItem x:Name="PrintItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PrintItem}}"/>
                      <dxb:BarSubItem x:Name="ExportItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportItem}}">
                          <dxb:BarButtonItem x:Name="ExportToPdfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPdfItem}}"/>
                          <dxb:BarButtonItem x:Name="ExportToHtmlItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToHtmlItem}}"/>
                          <dxb:BarButtonItem x:Name="ExportToMhtItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToMhtItem}}"/>
                          <dxb:BarButtonItem x:Name="ExportToXlsItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsItem}}"/>
                          <dxb:BarButtonItem x:Name="ExportToXlsxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsxItem}}"/>
                          <dxb:BarButtonItem x:Name="ExportToRtfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToRtfItem}}"/>
                          <dxb:BarButtonItem x:Name="ExportToDocxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToDocxItem}}"/>
                          <dxb:BarSubItem x:Name="ExportToImageItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToImageItem}}">
                              <dxb:BarButtonItem x:Name="ExportToBmpItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToBmpItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToGifItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToGifItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToJpegItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToJpegItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToPngItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPngItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToTiffItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToTiffItem}}"/>
                          </dxb:BarSubItem>
                      </dxb:BarSubItem>
                  </dxb:Bar>
                  <dxb:Bar x:Name="AppearanceGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarAppearanceGroup}}">
                      <dxb:BarSubItem x:Name="PaletteItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PaletteItem}}"/>
                  </dxb:Bar>
                  <dxb:Bar x:Name="FinancialSeriesGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarFinancialSeriesGroup}}">
                      <dxb:BarEditItem x:Name="SeriesSelectorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SeriesSelectorItem}}"/>
                  </dxb:Bar>
                  <dxb:Bar x:Name="FinancialIndicatorsGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarFinancialIndicatorsGroup}}">
                      <dxb:BarCheckItem x:Name="DisableIndicatorInteractionItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DisableIndicatorInteractionItem}}"/>
                      <dxb:BarCheckItem x:Name="DrawTrendLineIndicator" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawTrendLineIndicatorItem}}"/>
                      <dxb:BarCheckItem x:Name="DrawFibonacciArcsIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciArcsIndicatorItem}}"/>
                      <dxb:BarCheckItem x:Name="DrawFibonacciFansIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciFansIndicatorItem}}"/>
                      <dxb:BarCheckItem x:Name="DrawFibonacciRetracementIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciRetracementIndicatorItem}}"/>
                      <dxb:BarCheckItem x:Name="RemoveIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RemoveIndicatorItem}}"/>
                      <dxb:BarItemSeparator/>
                      <dxb:BarSubItem x:Name="AddIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=AddIndicatorItem}}"/>
                  </dxb:Bar>
                  <dxb:Bar x:Name="FinancialAxisGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=BarFinancialAxisGroup}}">
                      <dxb:BarEditItem x:Name="FinancialAxisUnitItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisUnitItem}}">
                          <dxb:BarEditItem.EditStyle>
                              <Style TargetType="{x:Type dxe:ComboBoxEdit}">
                                  <Setter Property="SelectedIndex" Value="0"/>
                              </Style>
                          </dxb:BarEditItem.EditStyle>
                          <dxb:BarEditItem.EditSettings>
                              <dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
                                  <dxe:ComboBoxEditSettings.Items>
                                      <dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_day" Caption="1 day" MeasureUnit="Day" MeasureUnitMultiplier="1"/>
                                      <dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_week" Caption="1 week" MeasureUnit="Week" MeasureUnitMultiplier="1"/>
                                      <dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_month" Caption="1 month" MeasureUnit="Month" MeasureUnitMultiplier="1"/>
                                  </dxe:ComboBoxEditSettings.Items>
                              </dxe:ComboBoxEditSettings>
                          </dxb:BarEditItem.EditSettings>
                      </dxb:BarEditItem>
                      <dxb:BarEditItem x:Name="FinancialAxisPeriodItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisPeriodItem}}">
                          <dxb:BarEditItem.EditStyle>
                              <Style TargetType="{x:Type dxe:ComboBoxEdit}">
                                  <Setter Property="SelectedIndex" Value="0"/>
                              </Style>
                          </dxb:BarEditItem.EditStyle>
                          <dxb:BarEditItem.EditSettings>
                              <dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
                                  <dxe:ComboBoxEditSettings.Items>
                                      <dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_6_month" Caption="6 month" MeasureUnit="Month" MeasureUnitMultiplier="6"/>
                                      <dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_1_year" Caption="1 year" MeasureUnit="Year" MeasureUnitMultiplier="1"/>
                                      <dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_2_year" Caption="2 year" MeasureUnit="Year" MeasureUnitMultiplier="2"/>
                                  </dxe:ComboBoxEditSettings.Items>
                              </dxe:ComboBoxEditSettings>
                          </dxb:BarEditItem.EditSettings>
                      </dxb:BarEditItem>
                  </dxb:Bar>
              </dxb:BarManager.Bars>
          </dxb:BarManager>
          <Grid>
              <dxc:ChartControl x:Name="chart">
              <!-- Chart settings. -->
              </dxc:ChartControl>
          </Grid>
      </DockPanel>
  </Window>

The following image illustrates a chart with its toolbars:

Add a Ribbon to a Chart

To add a ribbon to the Chart, click the chart’s smart tag and then select Create Ribbon.

Show the Auto-Generated Ribbon Markup
  <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:local="clr-namespace:ChartRibbon"
          xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
          xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon" 
          xmlns:dxct="http://schemas.devexpress.com/winfx/2008/xaml/charts/themekeys"
          xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
          xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
          x:Class="ChartRibbon.MainWindow"
          mc:Ignorable="d"
          Title="MainWindow" Height="450" Width="800">
      <DockPanel>
          <dxr:RibbonControl DockPanel.Dock="Top" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonControl}}" dxc:ChartControlBase.Chart="{Binding ElementName=chart}">
              <dxr:RibbonDefaultPageCategory Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonChartToolsCategory}}">
                  <dxr:RibbonPage x:Name="CommonPage" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonCommonPage}}">
                      <dxr:RibbonPageGroup x:Name="RunDesignerGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonRunDesignerGroup}}">
                          <dxb:BarButtonItem x:Name="RunDesignerItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RunDesignerItem}}"/>
                      </dxr:RibbonPageGroup>
                      <dxr:RibbonPageGroup x:Name="TemplatesGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonTemplatesGroup}}">
                          <dxb:BarButtonItem x:Name="SaveAsTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SaveAsTemplateItem}}"/>
                          <dxb:BarButtonItem x:Name="LoadTemplateItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=LoadTemplateItem}}"/>
                      </dxr:RibbonPageGroup>
                      <dxr:RibbonPageGroup x:Name="PrintAndExportGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonPrintAndExportGroup}}">
                          <dxb:BarButtonItem x:Name="PrintPreviewItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonPrintPreviewItem}}"/>
                          <dxb:BarButtonItem x:Name="PrintItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PrintItem}}"/>
                          <dxb:BarSubItem x:Name="ExportItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportItem}}">
                              <dxb:BarButtonItem x:Name="ExportToPdfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPdfItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToHtmlItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToHtmlItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToMhtItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToMhtItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToXlsItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToXlsxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToXlsxItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToRtfItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToRtfItem}}"/>
                              <dxb:BarButtonItem x:Name="ExportToDocxItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToDocxItem}}"/>
                              <dxb:BarSubItem x:Name="ExportToImageItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToImageItem}}">
                                  <dxb:BarButtonItem x:Name="ExportToBmpItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToBmpItem}}"/>
                                  <dxb:BarButtonItem x:Name="ExportToGifItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToGifItem}}"/>
                                  <dxb:BarButtonItem x:Name="ExportToJpegItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToJpegItem}}"/>
                                  <dxb:BarButtonItem x:Name="ExportToPngItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToPngItem}}"/>
                                  <dxb:BarButtonItem x:Name="ExportToTiffItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=ExportToTiffItem}}"/>
                              </dxb:BarSubItem>
                          </dxb:BarSubItem>
                      </dxr:RibbonPageGroup>
                      <dxr:RibbonPageGroup x:Name="AppearanceGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonAppearanceGroup}}">
                          <dxb:BarSubItem x:Name="PaletteItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=PaletteItem}}"/>
                      </dxr:RibbonPageGroup>
                  </dxr:RibbonPage>
                  <dxr:RibbonPage x:Name="FinancialOptionsPage" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonFinancialOptionsPage}}">
                      <dxr:RibbonPageGroup x:Name="FinancialSeriesAndAxisGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonFinancialSeriesAndAxisGroup}}">
                          <dxb:BarEditItem x:Name="SeriesSelectorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=SeriesSelectorItem}}"/>
                          <dxb:BarEditItem x:Name="FinancialAxisUnitItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisUnitItem}}">
                              <dxb:BarEditItem.EditStyle>
                                  <Style TargetType="{x:Type dxe:ComboBoxEdit}">
                                      <Setter Property="SelectedIndex" Value="0"/>
                                  </Style>
                              </dxb:BarEditItem.EditStyle>
                              <dxb:BarEditItem.EditSettings>
                                  <dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
                                      <dxe:ComboBoxEditSettings.Items>
                                          <dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_day" Caption="1 day" MeasureUnit="Day" MeasureUnitMultiplier="1"/>
                                          <dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_week" Caption="1 week" MeasureUnit="Week" MeasureUnitMultiplier="1"/>
                                          <dxc:ChartIntervalItem x:Name="FinancialAxisUnitItem_1_month" Caption="1 month" MeasureUnit="Month" MeasureUnitMultiplier="1"/>
                                      </dxe:ComboBoxEditSettings.Items>
                                  </dxe:ComboBoxEditSettings>
                              </dxb:BarEditItem.EditSettings>
                          </dxb:BarEditItem>
                          <dxb:BarEditItem x:Name="FinancialAxisPeriodItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=FinancialAxisPeriodItem}}">
                              <dxb:BarEditItem.EditStyle>
                                  <Style TargetType="{x:Type dxe:ComboBoxEdit}">
                                      <Setter Property="SelectedIndex" Value="0"/>
                                  </Style>
                              </dxb:BarEditItem.EditStyle>
                              <dxb:BarEditItem.EditSettings>
                                  <dxe:ComboBoxEditSettings DisplayMember="Caption" IsTextEditable="False">
                                      <dxe:ComboBoxEditSettings.Items>
                                          <dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_6_month" Caption="6 month" MeasureUnit="Month" MeasureUnitMultiplier="6"/>
                                          <dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_1_year" Caption="1 year" MeasureUnit="Year" MeasureUnitMultiplier="1"/>
                                          <dxc:ChartIntervalItem x:Name="FinancialAxisPeriodItem_2_year" Caption="2 year" MeasureUnit="Year" MeasureUnitMultiplier="2"/>
                                      </dxe:ComboBoxEditSettings.Items>
                                  </dxe:ComboBoxEditSettings>
                              </dxb:BarEditItem.EditSettings>
                          </dxb:BarEditItem>
                      </dxr:RibbonPageGroup>
                      <dxr:RibbonPageGroup x:Name="FinancialIndicatorsGroup" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RibbonFinancialIndicatorsGroup}}">
                          <dxb:BarCheckItem x:Name="DisableIndicatorInteractionItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DisableIndicatorInteractionItem}}"/>
                          <dxb:BarCheckItem x:Name="DrawTrendLineIndicator" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawTrendLineIndicatorItem}}"/>
                          <dxb:BarCheckItem x:Name="DrawFibonacciArcsIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciArcsIndicatorItem}}"/>
                          <dxb:BarCheckItem x:Name="DrawFibonacciFansIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciFansIndicatorItem}}"/>
                          <dxb:BarCheckItem x:Name="DrawFibonacciRetracementIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=DrawFibonacciRetracementIndicatorItem}}"/>
                          <dxb:BarCheckItem x:Name="RemoveIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=RemoveIndicatorItem}}"/>
                          <dxb:BarItemSeparator/>
                          <dxb:BarSubItem x:Name="AddIndicatorItem" Style="{DynamicResource {dxct:ChartToolbarThemeKey ResourceKey=AddIndicatorItem}}"/>
                      </dxr:RibbonPageGroup>
                  </dxr:RibbonPage>
              </dxr:RibbonDefaultPageCategory>
          </dxr:RibbonControl>
          <Grid>
              <dxc:ChartControl x:Name="chart">
              <!-- Chart settings. -->
              </dxc:ChartControl>
          </Grid>
      </DockPanel>
  </Window>

Note

Create Ribbon adds the DevExpress.Xpf.Ribbon and DevExpress.Data.Desktop libraries to the project.

The following image illustrates a chart with its ribbon:

Localize Ribbon and Toolbars

You can use one of the following approaches to translate strings used in the Ribbon/Toolbars:

  • Use Satellite Resource Assemblies (standard localization mechanism)

    In this approach, use DevExpress Localization Service to modify or create resource assemblies. To access translations specific to the Chart Control in the Localization Service, set .NET PLATFORM to WPF/Silverlight and use the Xpf.Charts module that contains resource strings for the chart.

  • Use Localizer Objects: Create a class that inherits ChartLocalizer, override its GetLocalizedString method and initialize the ChartLocalizer.Active property with a newly created class instance. The ChartStringId enumeration stores strings used in the Chart Ribbon/Toolbars.

    using DevExpress.Xpf.Charts;
using DevExpress.Xpf.Charts.Localization;
using System;
using System.Windows;

namespace ChartToolbar {
public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
        chart.DataSource = FinancialDataHelper.RetrieveData();
        //...
    }
    static MainWindow() {
        ChartLocalizer.Active = new MyLocalizer();
    }
}
public class MyLocalizer : ChartLocalizer {
    public override string Language { get { return "Deutsch"; } }
    public override string GetLocalizedString(ChartStringId id) {
        string res = "";
        switch (id) {
            // ... 
            case ChartStringId.ToolbarAddIndicatorItemCaption: 
                return "Indikatoren hinzufügen";
            case ChartStringId.ToolbarAddIndicatorItemDescription: 
                return "Um einen Indikator für die aktuelle Serie zu zeichnen,\n wählen Sie den gewünschten Indikator aus der Dropdown-Liste aus.";
            // ... 
            default:
                res = base.GetLocalizedString(id);
                break;
        }
        return res;

    }
}

Create a Custom Toolbar for the Chart

If you do not need the full range of default Ribbon/Toolbar commands, you can create a custom Toolbar and populate it with ChartCommands.

The following code executes the ChartCommands.RunDesignerCommand when a user clicks the Show Designer bar button.

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChartToolbar"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars" 
        x:Class="ChartToolbar.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="830">
    <DockPanel>
        <dxb:BarManager DockPanel.Dock="Top">
            <dxb:BarManager.Bars>
                <dxb:Bar>
                    <dxb:BarButtonItem Content="Show Designer" 
                                       Command="{Binding Commands.RunDesignerCommand, ElementName=chart}" 
                                       BarItemDisplayMode="ContentAndGlyph" Glyph="{dx:DXImage SvgImages/Icon Builder/Actions_Edit.svg}"/>
                </dxb:Bar>
            </dxb:BarManager.Bars>
        </dxb:BarManager>
        <Grid>
            <dxc:ChartControl x:Name="chart">
                <!-- ... -->
            </dxc:ChartControl>
        </Grid>
    </DockPanel>
</Window>