Histogram in ASP.NET MVC Charts Component
8 Oct 202424 minutes to read
Histogram
To render a histogram series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this:
-
Set the series type: Define the series
Typeas Histogram in your chart configuration. This indicates that the data should be represented as a histogram chart, providing a visual display of large amounts of data that are difficult to understand in a tabular or spreadsheet format.
@Html.EJS().Chart("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Histogram).
YName("Score").
BinInterval(20).
ShowNormalDistribution(true).
ColumnWidth(0.99).
Marker(mr => mr.Visible(true).Width(7).Height(7).DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff")))).
DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(px =>
px.Maximum(100)
.Minimum(0)
.Title("Score of Final Examination")
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.MajorGridLines(mg=>mg.Width(0))
).PrimaryYAxis(px =>
px.Minimum(0)
.Maximum(50)
.Interval(10)
.Title("Number of Students")
.LineStyle(ls=>ls.Width(0))
).Title("Examination Result").ChartArea(ca => ca.Border(br=>br.Width(0))).Tooltip(tt => tt.Enable(true)).Render()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;
}Events
Series render
The SeriesRender event allows you to customize series properties, such as data, fill, and name, before they are rendered on the chart.
@Html.EJS().Chart("container").SeriesRender("changeColor").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Histogram).
YName("Score").
BinInterval(20).
ShowNormalDistribution(true).
ColumnWidth(0.99).
Marker(mr => mr.Visible(true).Width(7).Height(7).DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff")))).
DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(px =>
px.Maximum(100)
.Minimum(0)
.Title("Score of Final Examination")
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.MajorGridLines(mg=>mg.Width(0))
).PrimaryYAxis(px =>
px.Minimum(0)
.Maximum(50)
.Interval(10)
.Title("Number of Students")
.LineStyle(ls=>ls.Width(0))
).Title("Examination Result").ChartArea(ca => ca.Border(br=>br.Width(0))).Tooltip(tt => tt.Enable(true)).Render()
<script>
function changeColor(args) {
args.fill = "#ff6347";
}
</script>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;
}Point render
The PointRender event allows you to customize each data point before it is rendered on the chart.
@Html.EJS().Chart("container").PointRender("changeColor").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Histogram).
YName("Score").
BinInterval(20).
ShowNormalDistribution(true).
ColumnWidth(0.99).
Marker(mr => mr.Visible(true).Width(7).Height(7).DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Font(ff => ff.FontWeight("600").Color("#ffffff")))).
DataSource(ViewBag.dataSource).Add();
}).PrimaryXAxis(px =>
px.Maximum(100)
.Minimum(0)
.Title("Score of Final Examination")
.EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
.MajorGridLines(mg=>mg.Width(0))
).PrimaryYAxis(px =>
px.Minimum(0)
.Maximum(50)
.Interval(10)
.Title("Number of Students")
.LineStyle(ls=>ls.Width(0))
).Title("Examination Result").ChartArea(ca => ca.Border(br=>br.Width(0))).Tooltip(tt => tt.Enable(true)).Render()
<script>
function changeColor(args) {
if (args.point.y >= 15) {
args.fill = '#ff6347';
} else {
args.fill = '#009cb8';
}
}
</script>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;
}