Histogram in ASP.NET CORE 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 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.
<ejs-chart id="lineContainer" 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.dataSource" 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;
        }

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.

<ejs-chart id="lineContainer" seriesRender="changeColor" 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.dataSource" 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>

<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.

<ejs-chart id="lineContainer" pointRender="changeColor" 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.dataSource" 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>

<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;
        }

See Also