[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
   [Collapse]Data Representation
     Filter Series Data
     Sorting Data
     Data Aggregation
     Calculating Summaries
    [Expand]Financial Charting
     Using The Top-N Feature
     Work Time and Workday Configuration
     Empty Points
     Histogram
   [Expand]Appearance Customization
   [Expand]End-User Features
   [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)

Histogram

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

Required Steps

Optional Steps

Expanded Specify a Data Source

There are two key differences in how you provide histogram data to a chart:

  • Define a data source field that provides series arguments. You never have to supply data for series 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 an argument's data member.

You can use the following API:

Member Description
ChartControl.DataSource (Series.DataSource) Specifies the chart control (series) data source.
SeriesBase.ArgumentDataMember Gets or sets the name of the data field that contains series point arguments.

The data structure looks as follows:

Expanded Aggregate Data and Divide an Axis Scale into Intervals

The Chart Control applies Scott's Normal Reference Rule (NumericIntervalOptions.DivisionMode is Auto) to compute an optimal number of bins. If necessary, you can define the number of bins or the bin size.

Specify the Number of Bins

The Chart Control can display a given number of bins. The bin value range is automatically calculated.

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

Member Description
NumericScaleOptions.IntervalOptions Stores options for numeric axis when its ScaleMode (see ScaleOptionsBase.ScaleMode) is Interval.
NumericIntervalOptions.DivisionMode Specifies how to divide axis scale into intervals.
IntervalDivisionMode (see IntervalDivisionMode) Lists values that define the axis interval calculation method.
NumericIntervalOptions.Count Gets or sets the number of intervals when DivisionMode is Count.

Specify the Bin Size

You can specify a value range that intervals display. The number of bins is calculated automatically.

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

Member Description
NumericScaleOptions.IntervalOptions Stores options for numeric axis when its ScaleMode (see ScaleOptionsBase.ScaleMode) is Interval.
NumericIntervalOptions.DivisionMode Specifies how to divide axis scale into intervals.
IntervalDivisionMode (see IntervalDivisionMode) Lists values that define the axis interval calculation method.
NumericIntervalOptions.Width Gets or sets the interval size when DivisionMode is Width.

Expanded Specify Side Bin Thresholds

You can change thresholds for underflow and overflow bins:

The following code uses the NumericIntervalOptions.UnderflowValue and NumericIntervalOptions.OverflowValue properties to change thresholds.

Expanded Specify Bar Width

A histogram usually uses bars positioned next to each other without gaps to display histogram bins.

Set the BarSeriesView.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 choose to align them to the beginning of each interval instead.

Specify the GridLayoutMode (NumericIntervalOptions.GridLayoutMode, DateTimeScaleOptions.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
IntervalOptionsBase.Pattern Gets or sets a format string that configures text for the interval Axis Labels and crosshair labels.
IntervalOptionsBase.UnderflowValuePattern Gets or sets a format string that configures text for the underflow interval Axis Labels and crosshair labels.
IntervalOptionsBase.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.

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.
Note

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

Expanded See Also

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