ReactFlot

ReactFlot - A react component for using Flot

For information about Flot library go here.

Requirements

It is required to have jQuery available. If you are using webpack, it is possible to provide jQuery using a plugin.

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
  ...
}

Usage

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.

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 if you are interested on it.