React React Charts Histogram Chart

Overview

The React Histogram Chart is a Bar (Column) Chart used for frequency distribution. Bar widths represent the classes into which variables are divided, while bar heights indicate the corresponding class frequencies.

Distribution curve

Display a graphical representation of the normal distribution for the underlying data.

Marker

Markers support built-in shapes such as circles, rectangles, ellipses, lines, diamonds, triangles, pentagons, crosses, and pluses. Images can also be used as marker symbols for customized presentations.

Data label

Data labels display information about data points. Templates support custom label content using HTML elements such as images, divs, and spans. Labels can also be rotated to a specified angle.

Vertical chart

Transpose the chart vertically to view data from a different perspective.

Customization

Customize the appearance of the Histogram Chart by adjusting color and border properties through built-in APIs.

React Histogram Chart code example

Get started with React Histogram Chart by using a few lines of HTML and JavaScript code, as demonstrated below. Also explore demo to learn how to render and configure the component.

import {AxisModel, HistogramSeries, Category, ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
  public primaryXAxis: AxisModel = { valueType: 'Category'};
  public data1 : any[]= [
    { x: 'GER', y: 172 },
    { x: 'RUS', y: 300 },
    { x: 'BRZ', y: 439 },
    { x: 'IND', y: 262 },
    { x: 'CHN', y: 721 },
];

public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[HistogramSeries, Category]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={this.data1} xName='x' yName='y' type='Histogram'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

Learning resources

UG

Histogram Chart User Guide

Learn the available options to customize React Histogram Chart.

API

Histogram Chart API Reference

Explore the React Histogram Chart APIs.

Explore all Syncfusion React components

Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.

Scroll up icon
Syncfusion Feedback