Support React

Currently it is not possible to use this library with React (easily).

Some modifications are needed to use it.

I want to discuss what should happen in this repository and what not.

I already did small changes to use it as a simple React component.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Frappe from 'frappe-charts/src/scripts/charts.js'

import 'frappe-charts/dist/frappe-charts.min.css' // to import styling

class Chart extends Component {
  componentDidMount() {
    const {title, data, type = 'bar', height = 250} = this.props
    this.c = new Frappe({
      parent: this.chart,
      title,
      data,
      type,
      height
    })
  }

  render() {
    return <div ref={chart => (this.chart = chart)}/>
  }
}

export default Chart

I created a demo repo for showcase: https://github.com/tobiaslins/frappe-charts-react-example

[achillesrasquinha]

@tobiaslins, Could you add your credits to our README with reference to your example? 😄

[mrdavey]

I’m using the latest version of Frappe Charts and it was quite easy to use in React JS.

In my App render() {}:

        <div id="chart"></div>
        {!this.state.isLoading &&          
          <ChartRender chartData={this.state.chartData} />
        }

Then in the same file, under the App component:

const ChartRender = (props) => {
  let data = {
    labels: props.chartData.dates,
    datasets: [
      ...
    ]
  }

  let chart = new Chart("#chart", {
   ...
  });
  return null;
}