Histogram Chart in React Chart

17 Aug 202624 minutes to read

Histogram Series

Follow these steps to render a histogram series, which displays the distribution of large datasets by automatically grouping values into bins.

  1. Set the series type: Set the series type to Histogram in the series configuration.

  2. Inject the HistogramSeries module: Add HistogramSeries to the services array of the Inject component inside ChartComponent. This registers the functionality required to render a histogram series.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, HistogramSeries } from '@syncfusion/ej2-react-charts';
import { points } from './datasource';
function App() {
    const chartData = [];
    function chartLoad() {
        points.map((value) => {
            chartData.push({
                y: value
            });
        });
    }
    const primaryxAxis = { majorGridLines: { width: 0 }, title: 'Score of Final Examination', minimum: 0, maximum: 100 };
    const primaryyAxis = { title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 } };
    const legendSettings = { visible: false };
    const tooltipsettings = { enable: true };
    const marker = { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    chartLoad();
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} legendSettings={legendSettings} title='Examination Results'>
                    <Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} yName='y' name='Score' type='Histogram' marker={marker} showNormalDistribution={true} columnWidth={0.99} binInterval={20}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,
    Legend, Category, Tooltip, ColumnSeries, ILoadedEventArgs, DataLabel, HistogramSeries
} from '@syncfusion/ej2-react-charts';
import { points } from './datasource';

function App() {

    const chartData: Object[] = [];
    function chartLoad(): void {
      points.map((value: number) => {
        chartData.push({
            y: value
            });
        });
    }
    const primaryxAxis: AxisModel= {  majorGridLines: { width: 0 }, title: 'Score of Final Examination',  minimum: 0, maximum: 100 }  ;
    const primaryyAxis: AxisModel= {   title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 }}  ;
    const legendSettings: LegendSettingsModel= { visible: false };
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };

        chartLoad();
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                legendSettings={ legendSettings }
                title='Examination Results'>
                    <Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  yName='y' name='Score' type='Histogram'
                        marker={ marker }
                        showNormalDistribution={true} columnWidth={0.99} binInterval={20}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let points = [ 
    5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,
    5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,
    26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,
    46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,
    46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,
    66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,
    66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,
    87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250
];
export let points: number[] = [ 
    5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,
    5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,
    26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,
    46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,
    46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,
    66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,
    66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,
    87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250
];

Events

Series render

The seriesRender event fires before each series is rendered and lets you modify series properties such as data, fill, or name. Use it to change a series color or to swap its data source on the fly.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, HistogramSeries } from '@syncfusion/ej2-react-charts';
import { points } from './datasource';
function App() {
    const chartData = [];
    function chartLoad() {
        points.map((value) => {
            chartData.push({
                y: value
            });
        });
    }
    const primaryxAxis = { majorGridLines: { width: 0 }, title: 'Score of Final Examination', minimum: 0, maximum: 100 };
    const primaryyAxis = { title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 } };
    const legendSettings = { visible: false };
    const tooltipsettings = { enable: true };
    const marker = { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    const seriesRender = (args) => {
        args.fill = '#ff6347';
      };
    chartLoad();
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} legendSettings={legendSettings} title='Examination Results' seriesRender={seriesRender}>
                    <Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} yName='y' name='Score' type='Histogram' marker={marker} showNormalDistribution={true} columnWidth={0.99} binInterval={20}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,
    Legend, Category, Tooltip, ColumnSeries, ILoadedEventArgs, DataLabel, HistogramSeries, ISeriesRenderEventArgs
} from '@syncfusion/ej2-react-charts';
import { points } from './datasource';

function App() {

    const chartData: Object[] = [];
    function chartLoad(): void {
      points.map((value: number) => {
        chartData.push({
            y: value
            });
        });
    }
    const primaryxAxis: AxisModel= {  majorGridLines: { width: 0 }, title: 'Score of Final Examination',  minimum: 0, maximum: 100 }  ;
    const primaryyAxis: AxisModel= {   title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 }}  ;
    const legendSettings: LegendSettingsModel= { visible: false };
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    const seriesRender = (args: ISeriesRenderEventArgs) => {
        args.fill = '#ff6347';
      };
        chartLoad();
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                legendSettings={ legendSettings }
                seriesRender={seriesRender}
                title='Examination Results'>
                    <Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  yName='y' name='Score' type='Histogram'
                        marker={ marker }
                        showNormalDistribution={true} columnWidth={0.99} binInterval={20}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let points = [ 
    5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,
    5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,
    26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,
    46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,
    46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,
    66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,
    66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,
    87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250
];
export let points: number[] = [ 
    5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,
    5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,
    26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,
    46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,
    46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,
    66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,
    66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,
    87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250
];

Point render

The pointRender event fires before each data point is drawn, letting you customize per-point marker shape, border, or fill. Use it to apply conditional formatting based on the point’s value.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, HistogramSeries } from '@syncfusion/ej2-react-charts';
import { points } from './datasource';
function App() {
    const chartData = [];
    function chartLoad() {
        points.map((value) => {
            chartData.push({
                y: value
            });
        });
    }
    const primaryxAxis = { majorGridLines: { width: 0 }, title: 'Score of Final Examination', minimum: 0, maximum: 100 };
    const primaryyAxis = { title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 } };
    const legendSettings = { visible: false };
    const tooltipsettings = { enable: true };
    const marker = { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    const pointRender = (args) => {
        if (args.point.y >= 15) {
            args.fill = '#ff6347';
        } else {
            args.fill = '#009cb8';
        }
      };
    chartLoad();
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltipsettings} legendSettings={legendSettings} title='Examination Results' pointRender={pointRender}>
                    <Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]}/>
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData} yName='y' name='Score' type='Histogram' marker={marker} showNormalDistribution={true} columnWidth={0.99} binInterval={20}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ChartTheme,LegendSettingsModel,TooltipSettingsModel,
    Legend, Category, Tooltip, ColumnSeries, ILoadedEventArgs, DataLabel, HistogramSeries, IPointRenderEventArgs
} from '@syncfusion/ej2-react-charts';
import { points } from './datasource';

function App() {

    const chartData: Object[] = [];
    function chartLoad(): void {
      points.map((value: number) => {
        chartData.push({
            y: value
            });
        });
    }
    const primaryxAxis: AxisModel= {  majorGridLines: { width: 0 }, title: 'Score of Final Examination',  minimum: 0, maximum: 100 }  ;
    const primaryyAxis: AxisModel= {   title: 'Number of Students', minimum: 0, maximum: 50, interval: 10, majorTickLines: { width: 0 }, lineStyle: { width: 0 }}  ;
    const legendSettings: LegendSettingsModel= { visible: false };
    const tooltipsettings: TooltipSettingsModel={ enable: true };
    const marker={ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } };
    const pointRender = (args: IPointRenderEventArgs) => {
        if (args.point.y >= 15) {
            args.fill = '#ff6347';
        } else {
            args.fill = '#009cb8';
        }
      };
        chartLoad();
        return <ChartComponent id='charts'
                primaryXAxis={ primaryxAxis }
                primaryYAxis={ primaryyAxis }
                tooltip={ tooltipsettings }
                legendSettings={ legendSettings }
                pointRender={pointRender}
                title='Examination Results'>
                    <Inject services={[HistogramSeries, Legend, Tooltip, Category, DataLabel]} />
                    <SeriesCollectionDirective>
                    <SeriesDirective dataSource={chartData}  yName='y' name='Score' type='Histogram'
                        marker={ marker }
                        showNormalDistribution={true} columnWidth={0.99} binInterval={20}>
                        </SeriesDirective>
                    </SeriesCollectionDirective>
              </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let points = [ 
    5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,
    5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,
    26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,
    46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,
    46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,
    66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,
    66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,
    87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250
];
export let points: number[] = [ 
    5.250, 7.750, 0, 8.275, 9.750, 7.750, 8.275, 6.250, 5.750,
    5.250, 23.000, 26.500, 27.750, 25.025, 26.500, 26.500, 28.025, 29.250, 26.750, 27.250,
    26.250, 25.250, 34.500, 25.625, 25.500, 26.625, 36.275, 36.250, 26.875, 40.000, 43.000,
    46.500, 47.750, 45.025, 56.500, 56.500, 58.025, 59.250, 56.750, 57.250,
    46.250, 55.250, 44.500, 45.525, 55.500, 46.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 56.625, 46.275, 56.250, 46.875, 43.000,
    46.250, 55.250, 44.500, 45.425, 55.500, 46.625, 56.275, 46.250, 56.875, 41.000, 63.000,
    66.500, 67.750, 65.025, 66.500, 76.500, 78.025, 79.250, 76.750, 77.250,
    66.250, 75.250, 74.500, 65.625, 75.500, 76.625, 76.275, 66.250, 66.875, 80.000, 85.250,
    87.750, 89.000, 88.275, 89.750, 97.750, 98.275, 96.250, 95.750, 95.250
];

Histogram-specific properties

The histogram series supports the following properties in addition to the standard series options:

Property Type Default Description
binInterval number null Width of each bin along the x-axis. When omitted, the chart calculates an interval automatically based on the data range.
showNormalDistribution boolean false When true, overlays a normal distribution curve on the bins.
columnWidth number null (histogram default 1) Width of each bin column as a ratio of the bin interval. Use values close to 1 so adjacent bins touch.

Provide the data as a flat array of numeric values and map only yName (for example, yName='y'); do not set xName.

See also