Dash Chart Editor

[jinnyzor]

Good day, All,

I have been working on a project recently that I think you all will be interested in.

Basically, I began wrapping the react-chart-editor that is provided by Plotly, for use directly with Dash.

This is an alpha release, as I would love feedback on people using it.

To install, pip install dash-chart-editor

Try running the example apps in the dash-chart-editor GitHub

Thanks @AnnMarieW for your valuable time and aid with this project

---

Dash Chart Editor

Dash Chart Editor is a Dash component wrapper for the Plotly React Chart Editor package, enabling you to use an editor panel for Plotly charts in your Dash app.

Installation

pip install dash-chart-editor

Demo and Quickstart

import dash_chart_editor as dce
from dash import Dash, html
import plotly.express as px


app = Dash(__name__, external_scripts=["https://cdn.plot.ly/plotly-2.18.2.min.js"])

df = px.data.gapminder()

app.layout = html.Div([
    html.H4("Dash Chart Editor Demo with the Plotly Gapminder dataset"),
    dce.DashChartEditor(
        dataSources=df.to_dict("list"),
    )
])


if __name__ == "__main__":
    app.run_server(debug=True)

Examples

See more demo apps in the /examples folder in GitHub.

• quickstart.py The quickstart app shown above.

• figure_templates.py - A demo on how to use plotly figure templates with the chart editor.

• figure_templates_dbc.py - A demo of Bootstrap themed figure templates from the Dash Bootstrap Templates library.

• customize.py - Example of ways to customize DashChartEditor

  • add a logo with logoSrc
  • only allow certain figure types with traceOptions
  • set graph mode bar menu with config. See all the options plotly.js/plot_config.js at master · plotly/plotly.js · GitHub.

• default_figure.py - Shows how to add a default figure to use when the app starts.

• change_datasets.py - An example showing loading different datasets in a dropdown

[AIMPED]

Great work, I’ll give it a go! Thanks @jinnyzor

[davzup89]

Amazing!

Thanks for your contribution.

[AnnMarieW]

This is so awesome! it’s super cool and fun to play with

Here is a quickstart app like the one in the original post. Amazing what you can do with 11 lines of code.

Give it a try:

pip install dash-chart-editor==0.0.1a4

1. quickstart.py

import dash_chart_editor as dce
from dash import Dash, html
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
app = Dash(__name__, external_scripts=["https://cdn.plot.ly/plotly-2.18.2.min.js"])


app.layout = html.Div([
    html.H4("Dash Chart Editor Demo with the Plotly Solar dataset"),
    dce.DashChartEditor(dataSources=df.to_dict("list")),
])


if __name__ == "__main__":
    app.run_server(debug=True)

2. Here is another app based on the pattern matching app in the Dash Example Index. It adds a dash-chart-editor for each figure:

Pattern-match

[hoatran]

It’s amazing. I’m just curious that can you add a function like every time the input information is changed, the code will appear at the bottom of the chart? So, users can look at it and can understand the settings of the chart more easily?

[jinnyzor]

Hello @hoatran,

Originally, that was the case, the figure would update every time a setting would change. This however did not catch when you moved annotations 100%, plus becomes a bit heavy on larger datasets.

You can pass a True to saveState of the dce, and this will grab the current state of the figure and give you the figure output. This is currently the most consistent way to get the info.

You can then look at the raw figure output, or clean the data (this removes the long lists that are in the data sections) using cleanDataFromFigure. This will make the output a little more legible.

[DaveG]

@AnnMarieW && @jinnyzor Getting the word out per:

Dave Gibbon on LinkedIn: #python #plotly #dash #interactivity...

[mo.elauzei]

Thank you so much for sharing this, @jinnyzor! Looking forward to trying it out.

[Awadhesh]

Hi Jinnyzor,

Great work , as from demo its looks awesome.

When i am running the sample code , i am getting below error message .
what can be the issue and how to resolve it .
AttributeError: partially initialized module ‘dash_chart_editor’ has no attribute ‘DashChartEditor’ (most likely due to a circular import)

Thanks in advance

[jinnyzor]

Hello @Awadhesh,

Please uninstall the library and then install it again.

If that doesnt work, then could you please post your code?

[JamesIsCooke]

Absolutely fantastic tool, well done and thank you!

Is there any chance of adding an example of how to save state? For example in the React live demo app you can select pre-saved plot combinations and I’m slightly struggling to see how to use saveState to do something similar.

[AnnMarieW]

HI @JamesIsCooke

You can use a button to save the state. Here is an example:

BSd3v/dash-chart-editor/blob/dev/examples/display_dce_figure_in_dccGraph.py

You can also see an example of using the chart editor to modify and save 3 different figures here:

BSd3v/dash-chart-editor/blob/dev/examples/three_figure_demo.py

[DaveG]

reposting … some feedback fm one of my contacts

1. It should ideally be like Mitosheet and generate the chart code, or the menu should be within a modal so it can be hidden.
2. Would be great if this came wrapped in something like dragula, so multiple charts could be inserted on a page and moved around (something like Dashboard engine)
3. Hard to configure the scales when it does not recognize a datatype (could be my user error)

[jinnyzor]

1- You can recreate the chart using the built in functions and the figures that it creates. Storing a figure as a dictionary, then passing it to the chartToPython along with a df will update the data in the chart, which can be used as a figure in dcc.Graph.

2- Yes, but that’s really not where this chart editor belongs. I am going to hook this up to my dashboard-helper, which does just that.

3- Yes, the data types is hard to determine on the JS side. Everything has to be determine by looking at the strings. There may be a way to determine this better.

[jike-tansuo]

This is very good, but if I want to know where to uniformly output the parameters after adjusting and changing the chart, because I want to apply the parameters to the Kanban chart developed by Dash

[dataturnsmeon]

Hi @AnnMarieW where can I find the example code of the app shown in your GIF, the one which shows pattern matching along with DCE?

[jinnyzor]

Hello @jike-tansuo,

Welcome to the community!

Do you have an example of what you are trying to do exactly?

[allsyntax]

Very cool. I didn’t know there was a tool like this for react. I know the new one is for Dash, but I think it’ll be real helpful to setup what you want with fewer trips back and forth to get it just right.

Edit – Is it possible to view the code for the chart that’s generated? Question applies to both the new Dash, and prior React versions.

[AnnMarieW]

Hi @dataturnsmeon - You can find the pattern matching example here

[atharvakatre]

This is so cool @jinnyzor !

Can we change the version of plotly js / plotly.py package being used under the hood by this wrapper?