Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  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]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Collapse]Spreadsheet
   [Expand]Product Information
    Product Structure
    Getting Started
   [Expand]Spreadsheet Document
    Supported Formats
   [Expand]Cell Basics
   [Expand]Spreadsheet Formulas
    Defined Names
    Data Binding
    Data Validation
   [Expand]Data Presentation
    Data Grouping
   [Expand]Pivot Table Overview
   [Expand]Charting Overview
    Printing
    Events
   [Expand]Mail Merge Overview
    Protection
    Find and Replace
   [Expand]Visual Elements
    Services
   [Expand]Shortcuts
   [Collapse]Examples
    [Expand]Files
    [Expand]Workbooks
    [Expand]Worksheets
    [Expand]Rows and Columns
    [Expand]Cells
    [Expand]Formulas
    [Expand]Import and Export Data
    [Expand]Data Binding
    [Expand]Mail Merge
    [Expand]Formatting Cells
    [Expand]Conditional Formatting
    [Expand]Group Data
    [Expand]Filter Data
    [Expand]Tables
    [Expand]Pivot Tables
    [Expand]Printing
    [Expand]Pictures
    [Collapse]Charts
      How to: Create a Basic Chart
      How to: Format Chart Elements
      How to: Display the Chart Title
      How to: Display and Format Data Labels
      How to: Show or Hide the Chart Legend
      How to: Change the Display of Chart Axes
      How to: Protect a Chart
      How to: Create a Chart Sheet
      How to: Move a Chart to a Chart Sheet
      How to: Specify Chart Sheet Print Options
      How to: Remove a Chart Sheet
      How to: Protect a Chart Sheet
    [Expand]Protection
    [Expand]Customization
  [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]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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Format Chart Elements

This example demonstrates how to enhance the appearance of an existing chart. For an example on how to create a basic chart in code, refer to the How to: Create a Basic Chart article.

Select the action you wish to perform.

Expanded Apply the Built-in Chart Style

Chart styles allow you to quickly change chart appearance. The chart style changes the chart's background fill, specifies the color of the data series, and applies different shape effects and outlines to the chart. To apply one of the predefined styles to the chart, utilize the ChartObject.Style property.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E5222.

The example below demonstrates how to create a chart and apply one of the predefined styles to it using the ChartObject.Style property.

Expanded Format an Individual Chart Element

The chart style allows you to apply a predefined set of format options. However, you can fine-tune these settings and specify custom formatting for individual chart elements by giving them a different color or outline. A full set of format characteristics available for a chart is provided by the ShapeFormat object. All objects that represent chart elements (Chart, PlotArea, Series, Axis, DataLabel, Legend, ChartTitle, etc.) inherit the ShapeFormat interface, so you can use its formatting properties to set a color and border of the required chart element.

  • Fill a chart element

    To fill a chart element, use the ShapeFormat.Fill property. This property returns the ShapeFill object that contains the shape fill characteristics. You can fill a chart element with a solid color by using the ShapeOutlineFill.SetSolidFill method, make an element transparent by utilizing the ShapeOutlineFill.SetNoFill method, or apply the gradient effect by calling the ShapeOutlineFill.SetGradientFill method. Currently, only a linear gradient with two color stops at the beginning and at the end of a gradient line is supported.

  • Specify the outline of a chart element

    To set a border of a chart element, use the ShapeFormat.Outline property. This property provides access to the ShapeOutline object that contains options used to draw the border or line on a chart. Use the ShapeOutlineFill.SetSolidFill method to specify border or line color. To remove the outline, call the ShapeOutlineFill.SetNoFill method. To change the width of a line or border, use the ShapeOutline.Width property.

  • Format a text of a chart element

    To format a text contained in a chart element, use the element's ShapeTextFormat.Font property. This property provides access to the ShapeTextFont object that contains a set of properties you can use to change font characteristics for the chart and axis titles, tick-mark labels and data labels. To change the font attributes for legend entries, use the Legend.Font property. Currently, you can specify only the font color by using the ShapeTextFont.Color property, since other options do not affect chart appearance.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E5222.

The example below demonstrates how to create a transparent chart with a semi-transparent plot area.

Expanded Specify the Chart View Options

There are specific settings for different chart types that affect chart appearance. Use the properties of the ChartView and View3DOptions objects to specify chart options for 2-D and 3-D charts. For example, you can adjust the distance between column clusters in the column chart by using the ChartView.GapWidth property, or apply a different color to each data marker in the series by setting the ChartView.VaryColors property to true.

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E5222.

The example below demonstrates how to create a clustered column chart and automatically apply a different color to each data marker representing a data point on the chart. To vary colors of the same-series data markers point by point, set the ChartView.VaryColors property to true.

Expanded See Also

How would you rate this topic?​​​​​​​