Add a Histogram to a React App with the @data-ui/histogram Library

To add a histogram into our React app, we can use the @data-ui/histogram library.

In this article, we’ll look at how to add a histogram to our React app with this library.

Installation

We can install it by running:

npm i @data-ui/histogram

Add a Histogram

We can add a histogram by writing:

import React from "react";
import {
  Histogram,
  DensitySeries,
  BarSeries,
  withParentSize,
  XAxis,
  YAxis
} from "@data-ui/histogram";

const ResponsiveHistogram = withParentSize(
  ({ parentWidth, parentHeight, ...rest }) => (
    <Histogram width={parentWidth} height={parentHeight} {...rest} />
  )
);

const rawData = Array(100).fill().map(Math.random);

export default function App() {
  return (
    <div className="App" style={{ height: 300 }}>
      <ResponsiveHistogram
        ariaLabel="histogram"
        orientation="vertical"
        cumulative={false}
        normalized={true}
        binCount={25}
        valueAccessor={(datum) => datum}
        binType="numeric"
        renderTooltip={({ event, datum, data, color }) => (
          <div>
            <strong style={{ color }}>
              {datum.bin0} to {datum.bin1}
            </strong>
            <div>
              <strong>count </strong>
              {datum.count}
            </div>
            <div>
              <strong>cumulative </strong>
              {datum.cumulative}
            </div>
            <div>
              <strong>density </strong>
              {datum.density}
            </div>
          </div>
        )}
      >
        <BarSeries animated rawData={rawData} />
        <XAxis />
        <YAxis />
      </ResponsiveHistogram>
    </div>
  );
}

We created the ResponsiveHistorgram component to make the histogram fir to the parent’s dimensions.

This is done by calling the withParentSize function to render the histogram with the height of the parent.

In the App component, we use the ResponsiveHistogram component by passing in a few props.

orientation has the orientation of the histogram.

cumulative indicates whether the histogram is cumulative.

normalized sets whether the histogram is normalized as a fraction of the total.

binCount is approximate of the number of bins to use.

renderTooltip is a prop with the function to let us get an entry from the bar we’re hovering on and render them in the tooltip.

bin0 has the bin name.

count has the count of the items in the bin.

cumulative has the cumulative number of items from the leftmost bin to the current bin.

density has the density.

The bars are rendered with the BarSeries component.

animated animates the display of the histogram when it’s loading.

rawData has the raw data.

XAxis adds the x-axis. YAxis adds the y-axis.

Also, we need to specify the height of the histogram container so it fits to the height.

Other properties include the stroke to change the color of the bar.

strokeWidth changes the width of the bar.

DensitySeries

The DensitySeries component lets us plot an estimate of the probability density function.

For example, we can write:

import React from "react";
import {
  Histogram,
  DensitySeries,
  BarSeries,
  withParentSize,
  XAxis,
  YAxis
} from "@data-ui/histogram";

const ResponsiveHistogram = withParentSize(
  ({ parentWidth, parentHeight, ...rest }) => (
    <Histogram width={parentWidth} height={parentHeight} {...rest} />
  )
);

const rawData = Array(100).fill().map(Math.random);

export default function App() {
  return (
    <div className="App" style={{ height: 300 }}>
      <ResponsiveHistogram
        ariaLabel="histogram"
        orientation="vertical"
        cumulative={false}
        normalized={true}
        binCount={25}
        valueAccessor={(datum) => datum}
        binType="numeric"
      >
        <DensitySeries animated rawData={rawData} />
        <XAxis />
        <YAxis />
      </ResponsiveHistogram>
    </div>
  );
}

to add the density series to add the histogram.

Conclusion

We can use the @data-ui/histogram library to add a histogram easily to our React app.