Creating an overview plot of another one using to_image()

AIMPED · January 8, 2023, 10:53pm

as I am trying to get better in JS, I created a possible solution for your answer using clientside callbacks. I’m sure there is room for improvement but it does the job. It even moves the annotation if the user moves the original figure (pan).

One known issue is that if the user decides to pan in the overwie figure, something gets mixed up and the size of the annotation is not correct anymore.

zoom

You can find the code here:

github.com

AIMPED/plotly_dash/blob/master/plotlyDash_show_zoom_area.py

# this is an answer to a question on the plotly forums
# https://community.plotly.com/t/creating-an-overview-plot-of-another-one-using-to-image/71416

from dash import Dash, dcc, Input, Output, State
import dash_bootstrap_components as dbc
import plotly.express as px
import numpy as np

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Row(
            dbc.Button(id='btn', children='new data')
        ),
        dbc.Row(
            [
                dbc.Col(
                    dcc.Graph(id='fig-main')
                ),

This file has been truncated. show original

mred cscb

Topic		Replies	Views
Adding a background image Dash Python	3	6814	October 5, 2018
Convert matplotlib figure to image then output to dash Dash Python	2	2117	September 2, 2020
Looking for a better way to display image Dash Python	5	12843	April 10, 2020
How to add a background image to a dashboard - plotly Dash Python	2	1509	March 31, 2020
Embed image as plot background Dash Python question	2	1260	March 10, 2022

Creating an overview plot of another one using to_image()

Related topics