Histogram in ASP.NET CORE Charts Component
17 Apr 202316 minutes to read
Histogram
Histogram Chart can provide a visual display of large amounts of data that are difficult to understand in a tabular or spreadsheet form and it can be rendered by specifying the series Type to Histogram.
<ejs-chart id="lineContainer" load="load" title="Examination Result">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-chart-primaryxaxis title="Score of Final Examination" minimum="0" maximum="100"
edgeLabelPlacement="@Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift">
<e-majorgridlines width="0"></e-majorgridlines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis minimum="0" maximum="50" title="Number of Students" interval=10>
<e-linestyle width="0"></e-linestyle>
</e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.ChartPoints" binInterval=20 yName="Score" showNormalDistribution="true"
columnWidth="0.99" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Histogram">
<e-series-marker visible="true" width="7" height="7">
<e-series-datalabel visible="true" position="@Syncfusion.EJ2.Charts.LabelPosition.Top">
<e-font color="#ffffff" fontWeight="600"></e-font>
</e-series-datalabel>
</e-series-marker>
</e-series>
</e-series-collection>
</ejs-chart>public IActionResult Index()
{
List<HistogramChartData> chartData = new List<HistogramChartData>
{
new HistogramChartData { Score = 5.250 },
new HistogramChartData { Score = 7.750 },
new HistogramChartData { Score = 0 },
new HistogramChartData { Score = 8.275 },
new HistogramChartData { Score = 9.750 },
new HistogramChartData { Score = 7.750 },
new HistogramChartData { Score = 8.275 },
new HistogramChartData { Score = 6.250 },
new HistogramChartData { Score = 5.750 },
new HistogramChartData { Score = 5.250 },
new HistogramChartData { Score = 23.000 },
new HistogramChartData { Score = 26.500 },
new HistogramChartData { Score = 27.750 },
new HistogramChartData { Score = 25.025 },
new HistogramChartData { Score = 26.500 },
new HistogramChartData { Score = 28.025 },
new HistogramChartData { Score = 29.250 },
new HistogramChartData { Score = 26.750 },
new HistogramChartData { Score = 27.250 },
new HistogramChartData { Score = 26.250 },
new HistogramChartData { Score = 25.250 },
new HistogramChartData { Score = 34.500 },
new HistogramChartData { Score = 25.625 },
new HistogramChartData { Score = 25.500 },
new HistogramChartData { Score = 26.625 },
new HistogramChartData { Score = 36.275 },
new HistogramChartData { Score = 36.250 },
new HistogramChartData { Score = 26.875 },
new HistogramChartData { Score = 40.000 },
new HistogramChartData { Score = 43.000 },
new HistogramChartData { Score = 46.500 },
new HistogramChartData { Score = 47.750 },
new HistogramChartData { Score = 45.025 },
new HistogramChartData { Score = 56.500 },
new HistogramChartData { Score = 58.025},
new HistogramChartData { Score = 59.250},
new HistogramChartData { Score = 56.750},
new HistogramChartData { Score = 57.250},
new HistogramChartData { Score = 46.250},
new HistogramChartData { Score = 55.250},
new HistogramChartData { Score = 44.500},
new HistogramChartData { Score = 45.525},
new HistogramChartData { Score = 55.500},
new HistogramChartData { Score = 46.625},
new HistogramChartData { Score = 46.275},
new HistogramChartData { Score = 56.250},
new HistogramChartData { Score = 46.875},
new HistogramChartData { Score = 43.000},
new HistogramChartData { Score = 46.250},
new HistogramChartData { Score = 55.250},
new HistogramChartData { Score = 44.500},
new HistogramChartData { Score = 45.425},
new HistogramChartData { Score = 55.500},
new HistogramChartData { Score = 56.625},
new HistogramChartData { Score = 46.275},
new HistogramChartData { Score = 56.250},
new HistogramChartData { Score = 46.875},
new HistogramChartData { Score = 43.000},
new HistogramChartData { Score = 46.250},
new HistogramChartData { Score = 55.250},
new HistogramChartData { Score = 44.500},
new HistogramChartData { Score = 45.425},
new HistogramChartData { Score = 55.500},
new HistogramChartData { Score = 46.625},
new HistogramChartData { Score = 56.275},
new HistogramChartData { Score = 46.250},
new HistogramChartData { Score = 56.875},
new HistogramChartData { Score = 41.000},
new HistogramChartData { Score = 63.000},
new HistogramChartData { Score = 66.500},
new HistogramChartData { Score = 67.750},
new HistogramChartData { Score = 65.025},
new HistogramChartData { Score = 66.500},
new HistogramChartData { Score = 76.500},
new HistogramChartData { Score = 78.025},
new HistogramChartData { Score = 79.250},
new HistogramChartData { Score = 76.750},
new HistogramChartData { Score = 77.250},
new HistogramChartData { Score = 66.250},
new HistogramChartData { Score = 75.250},
new HistogramChartData { Score = 74.500},
new HistogramChartData { Score = 65.625},
new HistogramChartData { Score = 75.500},
new HistogramChartData { Score = 76.625},
new HistogramChartData { Score = 76.275},
new HistogramChartData { Score = 66.250},
new HistogramChartData { Score = 66.875},
new HistogramChartData { Score = 80.000},
new HistogramChartData { Score = 85.250},
new HistogramChartData { Score = 87.750},
new HistogramChartData { Score = 89.000},
new HistogramChartData { Score = 88.275},
new HistogramChartData { Score = 89.750},
new HistogramChartData { Score = 97.750},
new HistogramChartData { Score = 98.275},
new HistogramChartData { Score = 96.250},
new HistogramChartData { Score = 95.750},
new HistogramChartData { Score = 95.250}
};
ViewBag.dataSource = chartData;
return View();
}
public class HistogramChartData
{
public double Score;
}