Dash Chart Editor

jinnyzor · March 27, 2023, 10:00pm

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

chart-editor-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 · March 28, 2023, 6:11am

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

davzup89 · March 28, 2023, 8:18am

Amazing!

Thanks for your contribution.

AnnMarieW · March 28, 2023, 11:13pm

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

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)

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

ezgif.com-gif-maker (4)

hoatran · March 29, 2023, 8:16am

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 · March 29, 2023, 10:51am

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 · March 30, 2023, 1:39am

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

mo.elauzei · March 30, 2023, 9:10pm

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

Awadhesh · March 31, 2023, 6:04am

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 · March 31, 2023, 11:51am

Hello @Awadhesh,

Please uninstall the library and then install it again.

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

JamesIsCooke · March 31, 2023, 2:58pm

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 · March 31, 2023, 3:31pm

HI @JamesIsCooke

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

github.com

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

"""
This demos saving the figure edited in dash-chart-editor
and displaying it in a dcc.Graph()
"""


import dash_chart_editor as dce
from dash import Dash, html, dcc, Input, Output, no_update
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"),
        html.Button("Save Figure", id="save"),
        dce.DashChartEditor(

This file has been truncated. show original

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

github.com

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

from dash import Dash, dcc, html, Input, Output, State, ctx, no_update
import plotly.express as px
import dash_bootstrap_components as dbc
import dash_chart_editor as dce
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP], prevent_initial_callbacks=True)

chart_editor_modal = dbc.Modal(
    [
        dbc.ModalTitle(["Editing Figure #", html.Span(id="chart-id")]),
        dbc.ModalBody(
            dce.DashChartEditor(
                dataSources=df.to_dict("list"),
                id="chart-editor",
            ),
        ),
        dbc.ModalFooter(dbc.Button("Save & Close", id="save", color="secondary")),

This file has been truncated. show original

DaveG · April 1, 2023, 3:24am

reposting … some feedback fm one of my contacts

It should ideally be like Mitosheet and generate the chart code, or the menu should be within a modal so it can be hidden.
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)
Hard to configure the scales when it does not recognize a datatype (could be my user error)

jinnyzor · April 1, 2023, 3:32am

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 · April 1, 2023, 3:50pm

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 · April 2, 2023, 7:02am

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 · April 2, 2023, 5:44pm

Hello @jike-tansuo,

Welcome to the community!

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

allsyntax · April 2, 2023, 10:18pm

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 · April 2, 2023, 10:29pm

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

atharvakatre · April 3, 2023, 7:06am

This is so cool @jinnyzor !

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

Topic		Replies	Views
Using react-chart-editor within dash Dash Python	2	812	November 20, 2020
Dash Monaco Editor component Released Dash Python	0	104	March 16, 2024
Show and Tell - Dash Code Editor Dash Python show-and-tell	6	2292	November 5, 2019
slider before and after in graph Dash Python community-components , question	2	587	October 7, 2022
How can I render my custom React component chart as an image in Dash? Dash Python	0	214	July 17, 2023

Dash Chart Editor

Dash Chart Editor

Installation

Demo and Quickstart

Examples

pip install dash-chart-editor==0.0.1a4

Related Topics