Dash Chart Editor

Dash Python
22

I have it taking whatever the window version is, this is why you import the js file into the app.

I haven’t tested different versions, but I think as far as charting, you can adjust it. For the dcc.Graph, you’d have to follow along with how Dash changes that version. Which you can change it. :grin:

1 Like
23

No, there isn’t a way for the react version.

There is a way to print out a python only version, although it needs some work because it can’t do things like transforms.

You can however recreate the chart with updated information by storing the cleaned figure and then passing it to the chartToPython function, this takes the figure and a df. The df can be updated from the original. Keep in mind, this also stores the zoom state and window as well.

1 Like
24

@allsyntax,

You can always get to the outputs of the figures. :wink:

image
image676×538 26.8 KB

Copy those objects, and then you can repeat the chart in whatever element. :smiley:

1 Like
25

Thank you! I eventually figured out how to use Output(‘myDashChartEditor’, ‘loadFigure’) along with chartToPython to save a configuration to json and then load it again (I’ve added an issue on github where certain plot types don’t load correctly).

The only thing I cannot see is how to load transforms properly: The transform in my saved json is applied correctly to the dataframe by chartToPython, but the actual transform doesn’t show up in the dash chart editor, so the user would not know that the dataframe has been manipulated in any way. Is there any workaround?

26

Hello @JamesIsCooke,

For transforms to show in the ChartEditor, the python figure needs to be merged with the cleaned figure from the original chart editor that created the figure.

This is because the transforms from the chart editor go into each traces data, but when using Python the transforms are striped out.

Also, thanks for posting the issue. :slight_smile:

27

Sorry, I’m being a bit slow and don’t quite understand. I have a python figure created from my saved json, but if I no longer have the original chart editor configuration (because I’ve been messing around, or loaded a different saved figure) can I still do the merging like you describe?

1 Like
28

You would need to have some way to recall the original setting, if I am understanding correctly.

If possible, maybe create some gifs with what you are trying to do and make a new topic for this.

29

Thanks it’s worked

2 Likes
30

you the best!

1 Like
31

This is a great way to style your charts on the UI. I am loving this component.

I had one question regarding UX of the component:

Currently scrollbar allows scrolling of both chart editor (left panel) as well as chart (right panel). Some settings can be very lengthy, and if I edit one of these settings at the bottom, I have to scroll up to see its impact on the chart. Would it be possible to have scrollbar only for the editor part, so that chart is always visible?

thanks!

@jinnyzor

32

Hello @smalgotrader,

You can configure these adjustments by using a new css stylesheet to target the individual components:

.plotly_editor .panel {
    max-height: 50vh;
    overflow: auto;
}

This will make it scroll any time it is past this height. Adjust your settings to match your needs. If you need more targeted control, you can add the id in front like this: #id