All docs
V20.1
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

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:

  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>