Table in Plotly.js React component

📊 Plotly Python
1

Hello!

I’m trying to create plots in python and render them with the Plotly.js React component. I was able to render a scatter, but not a table.

Here’s how a create the scatter plot :

import json
import numpy as np
import plotly.graph_objs as go
from plotly.utils import PlotlyJSONEncoder

N = 1000
random_x = np.random.randn(N)
random_y = np.random.randn(N)

# Create a trace
trace = go.Scatter(
    x = random_x,
    y = random_y,
    mode = 'markers'
)

data = [trace]
layout = dict(title="Example Scatter Plot")

figure = go.Figure(data=data, layout=layout)

json_str = json.dumps(figure, cls=PlotlyJSONEncoder)
print("Json to send to the React component:")
print("\n\n%s\n\n" % json_str)

I put the output of this in a Gist here.

When I paste this url in the Plotly.js JSON Editor, I get the scatter plot.

For the table, the code would be :

trace = go.Table(
    header=dict(values=['A Scores', 'B Scores']),
    cells=dict(values=[[100, 90, 80, 90],
                       [95, 85, 75, 95]]))

data = [trace] 
layout = dict(title="Example Table")
figure = go.Figure(data=data, layout=layout)

json_str = json.dumps(figure, cls=PlotlyJSONEncoder)
print("Json to send to the React component:")
print("\n\n%s\n\n" % json_str)

The output of this is here. But that link doesn’t work in the JSON Editor.

Are tables supported in React?

Thank you!

3

Hi!! i am facing the same issue now. have you figured out how to solve this?

best.