This project was bootstrapped with Create React App.

Introduction

Learn how to use Histogram Component in your application.

Histogram Component

The Histogram Component is a React Component which displays a histogram based on data passed to it.

Live example

Check out the Histogram Component.

Features

• The user is able to click on a particular bar of the histogram to highlight it.
• Hovering on the bar shows the key and value of the dictionary entry represented by the bar by a tooltip.

Usage

Define a Histogram tag in your JSX code and need to pass the data property as a dictionary.

For example:

<Histogram data={{"apples": 10, "oranges": 5, "pears": 15}} />

The above code will produce a bar chart, for apples, oranges and pears, where the height of the bar for the respective fruits is 10 for apples, 5 for oranges and 15 for pears. If an user hovers over the apples bar, the tooltip will show ‘Apples: 10’.

Optional properties

• ylabel: Y-Axis label
• xlabel: X-Axis label
• width: An width for the chart. By default 800px.
• height: An height for the chart. By default 500px.

For example:

<Histogram data={data} 
        ylabel="Counts" 
        xlabel="Fruits"
        width="800"
        height="500" />

How to run

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.