Plot redrawing is broken. The following example will show a working plot at first, but after a timer fires which triggers a new render the plot becomes broken

const Plotly = require('react-plotlyjs');

class BrokenPlot extends React.Component {
  constructor() {
    super();
    this.state = {foo: 0};
  }

  componentDidMount() {
    setTimeout(e => {
      this.setState({foo: 1});
    }, 1000);
  }

  render() {
    let layout = {
      title: 'simple example',
      xaxis: {
        title: 'time'
      }
    };
    let config = {
      showLink: false,
      displayModeBar: true
    };

    var trace1 = {
      x: [1, 2, 3, 4],
      y: [10, 15, 13, 17],
      mode: 'markers'
    };

    var trace2 = {
      x: [2, 3, 4, 5],
      y: [16, 5, 11, 9],
      mode: 'lines'
    };

    var trace3 = {
      x: [1, 2, 3, 4],
      y: [12, 9, 15, 12],
      mode: 'lines+markers'
    };

    var data = [ trace1, trace2, trace3 ];

    return (
      <Plotly className="whatever" data={data} layout={layout} config={config}/>
    );
  }
}

This wrapper library should use Plotly.newPlot instead, as described here: http://academy.plot.ly/react/3-with-plotly/

error TS2604: JSX element type 'Plotly' does not have any construct or call signatures.

I saw "Performs a full redraw on every update, I intend to make this more performant soon." listed as a problem in the README, so I thought I'd add it here to make it easier to track.

Not sure if you're aware of plotly/plotly.js#204, but it looks like you project is the primary hope React+Plotly :)

How should we import the plotly-cartesian module into a Meteor app?

import Plotly from 'plotly.js/dist/plotly-cartesian';

does not work because it gives an error

Uncaught Error: Cannot find module 'plotly.js/dist/plotly-cartesian'

Is there a way to save it using something like npm install package-name --save?

Did not find these modules via npm search plotly

Plotly.js uses an onClick event for callbacks - link

How can we access this in this project?

I am able to call the function the first time, but because of the redraw, it doesn't work again.

Below is the code for a Pie Chart that uses react-motion to dynamically set rotation and pull values for user interactions:

I should note that I've also tried to use Plotly's animate module, though I don't get the smooth animation that I see from react-motion

Looking forward to hearing any suggestions you might have.

import { Motion, spring } from 'react-motion';
import React, { Component } from 'react';

import createPlotlyComponent from 'react-plotlyjs';
import formatNum from 'utils/formatCashNumbers';
import truncate from 'lodash/truncate';

export default class PieChart extends Component {
  constructor() {
    super();
    this.state = {
      rotation: 0,
      pull: 0,
    };
    this.rotation = 10;
  }
  _getData(pull, rotation) {
    let { equities, cashAvailableToTrade } = this.props;
    let data = [ ];
    equities.forEach(({ totalValue, symbol, name }) => {
      data.push({ label: truncate(name, { length: 20 }), value: totalValue });
    });
    data.push({ label: 'Cash', value: cashAvailableToTrade });
    // console.log('> Data: ', data);
    return [
      {
        values: data.map(({ value }) => value),
        labels: data.map(({ label }) => label),
        customdata: data.map(({ value }) => formatNum(value.toFixed(2))),
        type: 'pie',
        hole: 0.4,
        pull: pull,
        rotation: rotation,
        sort: true,
        opacity: 1,
        textposition: 'none',
        hoverinfo: 'label+percent+value',
        hoverlabel: {
          bordercolor: 'white',
        }
      }
    ]
  }
  _getLayout() {
    let width = 400;
    let height = 300;
    if (typeof window !== 'undefined') {
      width = window.innerWidth;
      height = 300;
    }
    if (this.props.browser.lessThan.medium) {
      height = window.innerWidth / 2;
    }
    return {
      showlegend: false,
      width: width,
      height: height,
      margin: { t: 10, r: 10, b: 10, l: 10, pad: 0 },
    };
  }
  _getConfig() {
    return {
      displayModeBar: false
    };
  }
  _clickListener() {
    document.getElementById('dashboard-pie-chart').on('plotly_click', (data) => {
      console.log('> Plotly click data: ', data, this.plotly);
      this.setState({ pull: 0.05, rotation: this.state.rotation + 10 });
    });
  }
  componentDidUpdate() {

  }
  componentDidMount() {
    this._clickListener();
  }
  render() {
    if (typeof window === 'undefined') {
      return null;
    }
    const Plotly = require('plotly.js/lib/core');

    this.plotly = Plotly;

    Plotly.register([
      require('plotly.js/lib/pie')
    ]);

    const PlotlyComponent = createPlotlyComponent(Plotly);
    return (
      <Motion style={{ pull: spring(this.state.pull), rotation: spring(this.state.rotation)}}>
        {({ pull, rotation }) => {
          return (
            <PlotlyComponent
              ref={(el) => this.chart = el}
              id="dashboard-pie-chart"
              onPlotlyClick={(data) => console.log('> Plotly click: ', data)}
              data={this._getData(pull, rotation)}
              layout={this._getLayout()}
              config={this._getConfig()}
            />
          )
        }}
      </Motion>
    )
  }
}

Hi!

I'm the maintainer of the Plotly-supported https://github.com/plotly/react-plotly.js project. I see that this repo hasn't seen a lot of action in the past year... Would you like to add a note to the README or to NPM (like the react-plotly author did) pointing people to react-plotly.js so as to help centralize the community a bit?

:)

Cheers,
Nicolas

The newPlot call in componentDidUpdate introduced in v0.3.6 removes the old event listeners whenever componentDidUpdate is called. It may be that Plotly does some amount of mangling to the container which removes the listeners.

In the short term it can be fixed by reapplying all the listeners every update but I am unsure of how it should be done in the long term

To address this from the README: "Changes to the 'config' prop will not update the graph currently."

I am trying to style my graph with a loading animation when there is no data in my component's props yet.

Here is a gist with what my code looks like: https://gist.github.com/zachschultz/b3e7261cd774d0c54b21c2100381c6fb

UPDATE: Adding a console.log statement into the div makes this magically work...still have no idea why.

Essentially, if the graph data doesn't exist, I want to show a Plotly graph that will be grayed out with a spinning loading logo on it. However, this isn't working, and when my graph data comes in the graph itself doesn't re-render with data, it just stays blank.

I know for a fact the data is there and that the graph data state is being updated as well, so I'm really not sure what is going wrong here.

Hello,

I was able to get the polar scatter plot working, but I cannot figure out how to add new data to the plot without trouble. When I use setState it causes the plot to slap a new empty plot, not even the same type over top of the old plot. The old plot remains unchanged and underneath the new empty plot...

Let me know if you are able to update the plot's data and if so, could you post the code for doing it correctly? I could really use a polar scatter plot in my project :)

Hi, I just tried read me example using meteor with react, then server shows this error, even when I delete all code and just only install the package:
While processing files with ecmascript (for target web.browser):
packages/nicodinh:meteor-react-plotlyjs/PlotlyComponent.js:5:1: Unexpected token (5:1)

While processing files with ecmascript (for target os.windows.x86_64):
packages/nicodinh:meteor-react-plotlyjs/PlotlyComponent.js:5:1: Unexpected token (5:1)

Using OnHover \ onUnHover for example works, but raises an error for using unknown props on 'div'.
Solution: just remove the '...others' from the div. You don't need them there.