[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Collapse]Providing Data
      Create a Series Manually
      Add Points to a Series Manually
      Bind a Series to a Data Source
      Define a Template for Automatic Series
      Provide Data for the Drill Mode
      Best Practices: Display Large Data
      Series Scale Types
      Data Aggregation
      Calculate Summaries
      Data Filtering
      Work Time and Workday Configuration
      Top N and Others
      Empty Points
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)


This topic explains how to customize the Chart Control's axis and series settings to make a histogram.

Required Steps

Optional Steps

Expanded Specify a Data Source

You can provide histogram data to a chart in the following ways:

  • Define a data source field that provides series arguments. You do not have to supply data for series point values. The Chart Control calculates values as aggregates based on the frequency of arguments.

  • You can use a one-dimensional array as a data source. In this case, you do not have to specify the argument data member.

You can use the following API:

Member Description
ChartControl.DataSource (Series.DataSource) Specifies the chart control (series) data source.
Series.ArgumentDataMember Gets or sets the name of the data field which contains arguments for generated series points.

The data structure looks as follows:

Expanded Aggregate Data and Divide an Axis Scale into Bins

The Number of Bins is Auto-Calculated

The Chart control can apply Scott's Normal Reference Rule to compute an optimal number of bins and their ranges:

Specify the Number of Bins

The Chart Control can display a specified number of bins for numeric axes. The bin value range is calculated automatically.

The following code creates a histogram with five bins:

The following table lists the API members used in the code above:

Member Description
CountIntervalNumericScaleOptions (see CountIntervalNumericScaleOptions) These options provide the Count property. Use this property to specify the number of bins).
CountIntervalNumericScaleOptions.Count Gets or sets the number of intervals.

Specify the Bin Size

You can specify the bin size (measured in x-axis units). The number of bins is calculated automatically.

The code below creates bins with a size equal to ten x-axis measurement units:

The following table lists the API members used in the code above:

Member Description
WidthIntervalNumericScaleOptions (see WidthIntervalNumericScaleOptions) The options that provide means to create axis intervals with a specified width.
WidthIntervalNumericScaleOptions.Width Gets or sets the interval width in x-axis measurement units.

Expanded Specify Side Bin Thresholds

You can change thresholds for underflow and overflow bins:

The following code uses the IntervalNumericScaleOptions.UnderflowValue and IntervalNumericScaleOptions.OverflowValue properties to change thresholds. (For date-time axes, use IntervalDateTimeScaleOptions.UnderflowValue and IntervalDateTimeScaleOptions.OverflowValue instead.)

Expanded Specify Bar Width

A histogram can use bars positioned next to each other without gaps to display histogram bins.

Set the BarSeries2DBase.BarWidth property to 1 to remove gaps between bars.

Expanded Configure the Grid and Label Layout

The Chart Control aligns Axis Labels, major grid lines, and major tick marks to the center of each bin. You can also align them to the start of each interval.

Specify the GridLayoutMode (IntervalNumericScaleOptions.GridLayoutMode, DateTimeScaleOptionsBase.GridLayoutMode or QualitativeScaleOptions.GridLayoutMode) property to change the axis label, grid line, or tick mark alignment.

Expanded Customize Axis Label Text

You can format label text for axis scale intervals and the underflow/overflow bins.

The following table lists the API members the code above uses:

Member Description
IntervalNumericScaleOptions.Pattern Gets or sets a format string that configures text for the interval Axis Labels and crosshair labels.
IntervalNumericScaleOptions.UnderflowValuePattern Gets or sets a format string that configures text for the underflow interval Axis Labels and crosshair labels.
IntervalNumericScaleOptions.OverflowValuePattern Gets or sets a format string that configures text for the overflow interval Axis Labels and crosshair labels.

Patterns can contain regular text (displayed as is) and value placeholders in braces. To format numeric and date/time values, you can apply Format Specifiers. Use a colon to separate a placeholder and its format specifier. In XAML, insert an escape sequence ({}) into the beginning of a pattern if it starts with a placeholder.

The following table contains the available placeholders:

Placeholder Description
{OB} Displays an opening bracket.
{CB} Displays a closing bracket.
{OS} Displays the greater than sign.
{US} Displays the less than or less than or equal to sign.
{A1} Displays the interval start value.
{A2} Displays the interval end value.

Use the AxisLabel.TextPattern property to format label text when the GridLayoutMode (IntervalNumericScaleOptions.GridLayoutMode, DateTimeScaleOptionsBase.GridLayoutMode or QualitativeScaleOptions.GridLayoutMode) property is set to GridAndLabelShifted.

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