Histogram Chart in .NET MAUI Chart

10 Jan 20254 minutes to read

Histogram chart is a graphical representation that organizes a group of data points into user-specified ranges. It is similar in appearance to a column chart.

Customize histogram intervals using the HistogramInterval property and normal distribution curve can be collapsed using the ShowNormalDistributionCurve property.

XAML

<chart:SfCartesianChart>

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

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

    <chart:HistogramSeries ItemsSource="{Binding HistogramData}"
                           XBindingPath="Value" 
                           YBindingPath="Size"
                           HistogramInterval="20" 
                           ShowNormalDistributionCurve="True"/>
   
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis xAxis = new NumericalAxis();
chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis();
chart.YAxes.Add(yAxis);

// Create a histogram series to visualize distribution in the chart
HistogramSeries histogramSeries = new HistogramSeries
{
    ItemsSource = new ViewModel().HistogramData, 
    XBindingPath = "Value",
    YBindingPath = "Size",
    HistogramInterval = 20,
    ShowNormalDistributionCurve = true
};

// Add the configured histogram series to the chart's series collection
chart.Series.Add(histogramSeries);
this.Content = chart;

Customization of distribution curve

Customize the normal distribution curve by using the CurveStyle property.

XAML

<chart:SfCartesianChart>
    ....
    <chart:HistogramSeries ItemsSource="{Binding HistogramData}" 
                           XBindingPath="Value" 
                           YBindingPath="Size"
                           HistogramInterval="20"
                           ShowNormalDistributionCurve="True">
        <chart:HistogramSeries.CurveStyle>
            <chart:ChartLineStyle Stroke="Blue"
                                  StrokeWidth="2">
            </chart:ChartLineStyle>
        </chart:HistogramSeries.CurveStyle>
    </chart:HistogramSeries>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
....
HistogramSeries histogramSeries = new HistogramSeries
{
    ItemsSource = new ViewModel().HistogramData, 
    XBindingPath = "Value",
    YBindingPath = "Size",
    HistogramInterval = 20,
    ShowNormalDistributionCurve = true,
    // Customize the appearance of the distribution curve
    CurveStyle = new ChartLineStyle()
    {
        Stroke = Color.Blue,
        StrokeWidth = 2,
    };
};

chart.Series.Add(histogramSeries);
this.Content = chart;