UNPKG

react-flot

Version:

ReactFlot - A react component for using Flot

57 lines (45 loc) 1.52 kB
# 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.