Histogram Chart in ASP.NET MVC Charts

13 May 202524 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 Type as 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.

CSHTML
Histogram.cs
@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.

CSHTML
Series-render.cs
@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.

CSHTML
Point-render.cs
@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;
        }

Histogram Chart in ASP.NET MVC Charts

Histogram

Events

Series render

Point render

See Also