react-flot
Version:
ReactFlot - A react component for using Flot
57 lines (45 loc) • 1.52 kB
Markdown
# ReactFlot
ReactFlot - A react component for using Flot
For information about Flot library [go here](http://www.flotcharts.org/).
## Requirements
It is required to have jQuery available. If you are using webpack, it is possible to provide jQuery using a plugin.
```javascript
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
],
...
}
```
## Usage
```javascript
import ReactFlot from 'react-flot';
render () {
return (
<ReactFlot id="product-chart" options={options} data={data} width="50%" height="100px" />
);
}
```
## Arguments
* `@id` is the id of the chart. It is required and must be unique
* `@options` is the options based on flot documentation
* `@data` is the data based on flot documentation
* `@width` is the width of the component (default to 100%)
* `@height` is the height of the component (default to 400px)
## Available plugins
* `Pie Chart` from http://www.flotcharts.org/flot/examples/series-pie
* `Tooltip` from https://github.com/krzysu/flot.tooltip
* `Resize` from http://www.flotcharts.org/flot/examples/resize/index.html
## Using other plugins
If you want other plugins it is possible to import them.
```javascript
require('../node_modules/react-flot/flot/jquery.flot.time.min');
// OR
import '../node_modules/react-flot/flot/jquery.flot.time.min';
```
## Contributors
Would you like to contribute to this library? Don't be shy! [Contact me](mailto:rodrigowirth90@gmail.com) if you are interested on it.