SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components


I’m trying to render Histograms at runtime where the bins’ information like upper and lower bounds and width are known. However when I set the DataPointWidth to 0.2 for example, the bin spacing is different. Here is my code and XAML:

        // We can create a histogram with evenly spaced bins 
        // by specifying the lower bound, the upper bound, 
        // and the number of bins:
        var histogram = Histogram.CreateEmpty(values.Min(), values.Max(), numberOfBins);
        double width = (values.Max() - values.Min()) / numberOfBins;

        foreach (var bin in histogram.BinsAndValues)
            XyDataSeries<double, double> dataSeries = new XyDataSeries<double, double>();
            dataSeries.Append(bin.Key.LowerBound, bin.Value);
            pointList.Add(new ColumnRenderableSeriesViewModel() { DataSeries = dataSeries, StrokeThickness = 2, Stroke = Colors.Gray, Fill = Brushes.CornflowerBlue, DataPointWidth = 0.2 });

        ChartData = new ObservableCollection<IRenderableSeriesViewModel>(pointList);

        <Style x:Key="BaseColumnStyle" TargetType="s:FastColumnRenderableSeries">
        <Setter Property="Opacity" Value="0.3"/>
        <Setter Property="StrokeThickness" Value="2"/>

    <Style x:Key="BlueColumnStyle" BasedOn="{StaticResource BaseColumnStyle}" TargetType="s:FastColumnRenderableSeries">
        <Setter Property="Fill" Value="CornflowerBlue"/>
    <!--  Define styles for the SciChartSurface  -->
    <Style x:Key="SciChartSurfaceStyle" TargetType="s:SciChartSurface">
        <Setter Property="Background" Value="White"/>
        <Setter Property="Padding" Value="20"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontFamily" Value="Arial Black"/>
        <Setter Property="FontWeight" Value="Bold"/>

    <!--  Define styles for the GridLinesPanel  -->
    <Style x:Key="GridLinesPanelStyle" TargetType="s:GridLinesPanel">
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="Black"/>

    <!--  Using the LayoutTransform is much more apropriate in this point  -->
    <!--  the RenderTransform is used for demonstration purposes only,  -->
    <!--  for the compatibility with Silverlight reasons  -->
    <Style x:Key="AxisLabelStyle" TargetType="s:DefaultTickLabel">
        <!--<Setter Property="RenderTransform">
                <RotateTransform Angle="-15"/>
        <Setter Property="Margin" Value="0"/>

    <!--  Define styles for the X and Y Axes  -->
    <Style x:Key="AxisStyle" TargetType="s:AxisBase">
        <Setter Property="FontSize" Value="18"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="TitleFontSize" Value="12"/>
        <Setter Property="TitleFontWeight" Value="Bold"/>
        <Setter Property="TickTextBrush" Value="Black"/>
        <Setter Property="DrawMajorBands" Value="False"/>
        <Setter Property="DrawMinorGridLines" Value="False"/>
        <Setter Property="DrawMinorTicks" Value="False" />
        <Setter Property="DrawMajorTicks" Value="False"/>
        <Setter Property="TickLabelStyle" Value="{StaticResource AxisLabelStyle}"/>
        <Setter Property="MajorGridLineStyle">
                <Style TargetType="Line">
                    <Setter Property="Stroke" Value="LightGray"/>
                    <Setter Property="StrokeThickness" Value="1"/>
    <s:SciChartSurface x:Name="histogram" ChartTitle="{Binding ChartTitle}" RenderableSeries="{s:SeriesBinding ChartData}"
                       Style="{StaticResource SciChartSurfaceStyle}" GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}">
            <s:NumericAxis AxisTitle="{Binding XAxisTitle}" Style="{StaticResource AxisStyle}" AutoRange="Always"/>
            <s:NumericAxis AxisTitle="{Binding YAxisTitle}" AxisAlignment="Left" Style="{StaticResource AxisStyle}"/>

How can I make the bin spacing the same independent of bin width? See my attachment of two different histograms with the DataPointWidth for each.

  • Yuriy
    Hi Mark, it is not quite clear to me what you want to do. DataPointWidth is a relative width of a single column. If you set it to “1”, all columns will be merged together. If you set it to a smaller value > 0, columns will become narrower. Could you please clarify how your desired chart should look?
  • You must to post comments

Hi Yuriy,

I would like to keep the DataPointWidth constant and have all the bins (columns) with minimal or no gap like the histogram on the right. Do I have to calculate that value based on the data I’m plotting?


  • Yuriy
    Hi Mark, thanks for clarification. I’ve noticed that you have several ColumnSeries with one point each. May I ask, what is the reason for this? Why don’t you want to have one ColumnSeries with all the data in it and DataPointWidth set to “1”? Here is an example:
  • You must to post comments


Your reply helped me find where I was making a mistake. I moved the line where I’m adding a ColumnRenderableSeriesViewModel to the XyDataSeries out the for loop.


  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.