Class HistogramSeries

The HistogramSeries displays the distribution of a dataset by dividing it into intervals and showing the count of values within each interval.

Inheritance

System.Object

ChartSeries

CartesianSeries

XYDataSeries

HistogramSeries

Inherited Members

CartesianSeries.ActualXAxis

CartesianSeries.ActualYAxis

CartesianSeries.DataLabelSettings

CartesianSeries.DataLabelSettingsProperty

CartesianSeries.GetDataPoints(Double, Double, Double, Double)

CartesianSeries.GetDataPoints(Rect)

CartesianSeries.Label

CartesianSeries.LabelProperty

CartesianSeries.ShowTrackballLabel

CartesianSeries.ShowTrackballLabelProperty

CartesianSeries.TrackballLabelTemplate

CartesianSeries.TrackballLabelTemplateProperty

CartesianSeries.XAxisName

CartesianSeries.XAxisNameProperty

CartesianSeries.YAxisName

CartesianSeries.YAxisNameProperty

ChartSeries.CreateAnimation(Action<Double>)

ChartSeries.DrawDataLabel(ICanvas, Brush, String, PointF, Int32)

ChartSeries.EnableAnimation

ChartSeries.EnableAnimationProperty

ChartSeries.EnableTooltip

ChartSeries.EnableTooltipProperty

ChartSeries.Fill

ChartSeries.FillProperty

ChartSeries.GetDataPointIndex(Single, Single)

ChartSeries.IsVisible

ChartSeries.IsVisibleOnLegend

ChartSeries.IsVisibleOnLegendProperty

ChartSeries.IsVisibleProperty

ChartSeries.ItemsSource

ChartSeries.ItemsSourceProperty

ChartSeries.LabelContext

ChartSeries.LabelContextProperty

ChartSeries.LabelTemplate

ChartSeries.LabelTemplateProperty

ChartSeries.LegendIcon

ChartSeries.LegendIconProperty

ChartSeries.Opacity

ChartSeries.OpacityProperty

ChartSeries.PaletteBrushes

ChartSeries.PaletteBrushesProperty

ChartSeries.SelectionBehavior

ChartSeries.SelectionBehaviorProperty

ChartSeries.ShowDataLabels

ChartSeries.ShowDataLabelsProperty

ChartSeries.TooltipTemplate

ChartSeries.TooltipTemplateProperty

ChartSeries.XBindingPath

ChartSeries.XBindingPathProperty

ChartSeries.XRange

ChartSeries.YRange

XYDataSeries.StrokeWidth

XYDataSeries.StrokeWidthProperty

XYDataSeries.YBindingPath

XYDataSeries.YBindingPathProperty

Namespace: Syncfusion.Maui.Toolkit.Charts

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class HistogramSeries : XYDataSeries, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, IDrawCustomLegendIcon

Remarks

To render a series, create an instance of HistogramSeries class, and add it to the Series collection.

It provides options for Fill, PaletteBrushes, StrokeWidth, Stroke, and Opacity to customize the appearance.

EnableTooltip - A tooltip displays information while tapping or mouse hovering above a segment. To display the tooltip on a chart, you need to set the EnableTooltip property as true in HistogramSeries class, and also refer TooltipBehavior property.

Data Label - Data labels are used to display values related to a chart segment. To render the data labels, you need to set the ShowDataLabels property as true in HistogramSeries class. To customize the chart data labels alignment, placement, and label styles, you need to create an instance of CartesianDataLabelSettings and set to the DataLabelSettings property.

Animation - To animate the series, set True to the EnableAnimation property.

LegendIcon - To customize the legend icon using the LegendIcon property.

Examples

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.Series>
              <chart:HistogramSeries
                  ItemsSource="{Binding Data}"
                  XBindingPath="XValue"
                  YBindingPath="YValue"
                  HistogramInterval="10"/>
          </chart:SfCartesianChart.Series>  

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    NumericalAxis yAxis = new NumericalAxis();

    chart.XAxes.Add(xAxis);
    chart.YAxes.Add(yAxis);

    ViewModel viewModel = new ViewModel();

    HistogramSeries series = new HistogramSeries();
    series.ItemsSource = viewModel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    series.HistogramInterval = 10;
    chart.Series.Add(series);

    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
       Data = new ObservableCollection<Model>();
       Data.Add(new Model() { XValue = 9, YValue = 0 });
       Data.Add(new Model() { XValue = 12, YValue = 0 });
       Data.Add(new Model() { XValue = 17, YValue = 0 });
       Data.Add(new Model() { XValue = 22, YValue = 0 });
       Data.Add(new Model() { XValue = 25, YValue = 0 });
       Data.Add(new Model() { XValue = 28, YValue = 0 });
       Data.Add(new Model() { XValue = 31, YValue = 0 });
       Data.Add(new Model() { XValue = 37, YValue = 0 });
       Data.Add(new Model() { XValue = 44, YValue = 0 });       
    }

Constructors

HistogramSeries()

Initializes a new instance of the HistogramSeries class.

Declaration

public HistogramSeries()

Fields

CurveStyleProperty

Identifies the CurveStyle bindable property.

Declaration

public static readonly BindableProperty CurveStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The CurveStyle property helps to customize the appearance of the curve in the histogram series.

HistogramIntervalProperty

Identifies the HistogramInterval bindable property.

Declaration

public static readonly BindableProperty HistogramIntervalProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The HistogramInterval property indicates interval of histogram series.

ShowNormalDistributionCurveProperty

Identifies the ShowNormalDistributionCurve bindable property.

Declaration

public static readonly BindableProperty ShowNormalDistributionCurveProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ShowNormalDistributionCurve property indicates whether to show the normal distribution curve.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Stroke property indicates stroke brush used for the series.

Properties

CurveStyle

Gets or sets the style for the curve in the histogram, which defines the appearance of the line connecting the bars or points

Declaration

public ChartLineStyle CurveStyle { get; set; }

Property Value

Type	Description
ChartLineStyle	It accepts ChartLineStyle values.

Remarks

Null values are invalid.

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:HistogramSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"
                                Stroke="Red">
            <chart:HistogramSeries.CurveStyle>
              <chart:ChartLineStyle Stroke ="Red" StrokeWidth ="2"/>
             <chart:HistogramSeries.CurveStyle>
    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    HistogramSeries series = new HistogramSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          Stroke = new SolidColorBrush(Colors.Red),
          CurveStyle = new ChartLineStyle()
          {
             Stroke = Colors.Red,
             StrokeWidth = 2;
          }
    };

    chart.Series.Add(series);

HistogramInterval

Gets or sets the interval for the histogram bars, determining the range of values that each bar represents.

Declaration

public double HistogramInterval { get; set; }

Property Value

Type	Description
System.Double	It accepts System.Double values and its default value is 1.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:HistogramSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"
                                HistogramInterval="10" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    HistogramSeries series = new HistogramSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          HistogramInterval = 10,
    };

    chart.Series.Add(series);

ShowNormalDistributionCurve

Gets or sets a value indicating whether to show the normal distribution curve.

Declaration

public bool ShowNormalDistributionCurve { get; set; }

Property Value

Type	Description
System.Boolean	It accepts System.Boolean values and its default value is true.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:HistogramSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"
                                ShowNormalDistributionCurve="False" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    HistogramSeries series = new HistogramSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          ShowNormalDistributionCurve = false,
    };

    chart.Series.Add(series);

Stroke

Gets or sets the stroke of the histogram segments, which defines the color of the borders around each segment.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	It accepts Microsoft.Maui.Controls.Brush values and its default value is Transparent.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:HistogramSeries ItemsSource="{Binding Data}"
                                XBindingPath="XValue"
                                YBindingPath="YValue"
                                Stroke = "Red" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    HistogramSeries series = new HistogramSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          Stroke = new SolidColorBrush(Colors.Red),
    };

    chart.Series.Add(series);

Methods

CreateSegment()

Creates and initializes a new chart segment for the chart.

Declaration

protected override ChartSegment CreateSegment()

Returns

Type
ChartSegment

Overrides

ChartSeries.CreateSegment()

DrawSeries(ICanvas, ReadOnlyObservableCollection<ChartSegment>, RectF)

Draw the series for the chart.

Declaration

protected override void DrawSeries(ICanvas canvas, ReadOnlyObservableCollection<ChartSegment> segments, RectF clipRect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Collections.ObjectModel.ReadOnlyObservableCollection<ChartSegment>	segments
Microsoft.Maui.Graphics.RectF	clipRect

Overrides

ChartSeries.DrawSeries(ICanvas, ReadOnlyObservableCollection<ChartSegment>, RectF)