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.

@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>
        <ChartPrimaryYAxis Minimum="0" Maximum="6" Interval="2" Title="Number of Students">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <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>
        <ChartTooltipsettings Enable="true"></ChartTooltipsettings>


  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