Search results

Histogram Series

Histogram type charts can provide a visual display of large amounts of data that are difficult to understand in a tabular or spreadsheet form. To render a histogram chart, use series Type as Histogram.

histogram.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsChart Title="Score of Final Examination">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
  
        <ChartPrimaryXAxis Minimum="0" Maximum="100">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
  
        <ChartPrimaryYAxis Minimum="0" Maximum="6" Interval="2" Title="Number of Students">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
  
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ExamScores" YName="Y" Type="ChartSeriesType.Histogram" BinInterval="20" ShowNormalDistribution="true" ColumnWidth="0.99">
                <ChartMarker Visible="true" Height="10" Width="10">
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont Color="#ffffff" FontWeight="600"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
  
        <ChartTooltipsettings Enable="true"></ChartTooltipsettings>
</EjsChart>

@code{

  public class Data
  {
      public double Y;
  }

  public List<Data> ExamScores = new List<Data>
  {
       new Data { Y=5.250},
       new Data { Y=7.750},
       new Data { Y=8.275},
       new Data { Y=9.750},
       new Data { Y=36.250},
       new Data { Y=46.250},
       new Data { Y=56.250},
       new Data { Y=66.500},
       new Data { Y=76.625},
       new Data { Y=80.000},
       new Data { Y=97.750}
  };
}

Pareto chart

See Also