https://github.com/mateuszitelli/react-bar-chart

A bar chart component made with React.js and D3.js
https://github.com/mateuszitelli/react-bar-chart

Last synced: 16 days ago
JSON representation

A bar chart component made with React.js and D3.js

• Host: GitHub
• URL: https://github.com/mateuszitelli/react-bar-chart
• Owner: MateusZitelli
• License: mit
• Created: 2014-10-29T21:02:26.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-02-03T23:19:32.000Z (almost 7 years ago)
• Last Synced: 2024-12-10T10:58:44.713Z (26 days ago)
• Language: JavaScript
• Size: 47.9 KB
• Stars: 19
• Watchers: 4
• Forks: 12
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-bar-chart

> A resizible bar chart component made with React.js and D3.js



## Usage

First install the component:

```sh

npm install --save react-bar-chart

```

And them use the component like this to generate the image on top:

```jsx

import React from 'react';

import BarChart from 'react-bar-chart';

const data = [

  {text: 'Man', value: 500}, 

  {text: 'Woman', value: 300} 

];

const margin = {top: 20, right: 20, bottom: 30, left: 40};

const Example = React.createClass({

  getInitialState() {

    return { width: 500 };

  },

  componentDidMount: () => {

    window.onresize = () => {

     this.setState({width: this.refs.root.offsetWidth}); 

    };

  },

  handleBarClick(element, id){ 

    console.log(`The bin ${element.text} with id ${id} was clicked`);

  },

  render() {

    return (

        


            
 

                

            

        

    );

  }

});


React.render(

  ,

  document.getElementById('react-container')

);

```