Need help regarding plotly Annotation

nileshj87 · July 4, 2023, 7:23am

Hello All,

I am new to plotly and I Need help regarding plotly Annotation.
Please refer to this link Image Annotations | Dash for Python Documentation | Plotly

I need to click on a specific image portion and it should generate a click event which I can use for further action.

AIMPED · July 4, 2023, 7:57am

Hi @nileshj87 welcome to the forums.

Here some examples:

github.com

AIMPED/plotly_dash/blob/master/plotlyDash_get_clickInfo.py

from dash import Dash, Input, Output, dcc, html
from dash.exceptions import PreventUpdate
import dash_bootstrap_components as dbc
import plotly.express as px
from PIL import Image
import urllib.request

# get an example image from url
urllib.request.urlretrieve(
    'https://raw.githubusercontent.com/michaelbabyn/plot_data/master/bridge.jpg',
    'bridge.jpg'
)

# open image and create plotly figure, locally stored images can be used this way too
img = Image.open('bridge.jpg')
fig = px.imshow(img=img)

# update figure layout, actually not necessary for the functionality
fig.update_layout(
    {

This file has been truncated. show original

github.com

AIMPED/plotly_dash/blob/master/plotlyDash_annotations.py

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

# create image and plotly express object
img = np.random.randint(0, 255, (90, 160))
fig = px.imshow(img, color_continuous_scale='Blugrn')

# update layout
fig.update_layout(
    template='plotly_dark',
    plot_bgcolor='rgba(0, 0, 0, 0)',
    paper_bgcolor='rgba(0, 0, 0, 0)',
    width=700,
    height=500,
    margin={
        'l': 0,
        'r': 0,

This file has been truncated. show original

nileshj87 · July 4, 2023, 3:10pm

Thanks for sharing the code. You saved my life.

Topic		Replies	Views
Adding images to annotations plotly.js	6	7006	August 17, 2017
How to add a shape when user adds an annotation shape Dash Python question	2	1337	August 16, 2022
Dash how to get plotly `annotationText` edits event Dash Python question	0	131	March 8, 2024
Plotly Heatmap Interactivity Dash Python	2	720	January 21, 2023
Coordinates of clicked points 📊 Plotly Python question	3	1149	June 29, 2022

Need help regarding plotly Annotation

Related topics